How can I prevent the text input size from being changed on the mobile?

advertisements

So I created a page with a bunch of text inputs arranged to line up with particular parts of an image they are on top of. Everything looked great but then I used Adobe Edge Inspect to look at the page on my ipad mini, a lot of the text boxes where miss aligned, particularly the ones where I had changed the height or width greatly from the default. As a test I made a text box with a width the same as the width the image and sure enough on the ipad the textbox has a greater width than the image. How can I prevent the text inputs from changing size?


You need to set your viewport for iOS devices so that the page loads with the correct width and does not try to wrap anything. https://developer.apple.com/library/ios/documentation/appleapplications/reference/safariwebcontent/usingtheviewport/usingtheviewport.html

Can you post code from your page so that we can help you work it out? a link?