3

I have an input text as

 <div class="slds">
    <div class="slds-form">
        <div class="slds-form-element " >
            <ui:inputText aura:id="textSearch" class="slds-input searchInputText searchclass" value="{!v.keyToSearch}" updateOn="keyup" keyup="{!c.searchKeyChange}" 
                          placeholder="Type Name Here">
            </ui:inputText>
        </div></div></div>

.THIS .searchclass {
background-image: url(/resource/testSearchImage);
background-repeat: no-repeat;
text-indent: 20px;
background-size: 27px;
background-position: 98%;
border-radius: 155.25rem;
border: solid #137FC3 1px;}

.THIS .searchInputText {
border-radius: 155.25rem;
border: solid #137FC3 1px;
color :#9B9B9B;
margin-left : -3rem;}

When testing on iPhone 6 every time I click into the input bar the screen zooms in slightly, and causes for a bad UX.

How could i prevent zooming in of input text?

1 Answer 1

0

I had the same issue on SF mobile for iPhone. The fix is to limit the viewport maximum scale to 1.0. Add the following code to your init function and this should fix your issue:

//Add viewport meta tag

var meta = document.createElement("meta");
meta.setAttribute("name", "viewport");
meta.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1");
document.getElementsByTagName('head')[0].appendChild(meta);

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .