Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Disable Auto Zoom On Text Box / Area

Posted on 2013-11-01
17
Medium Priority
?
1,560 Views
Last Modified: 2013-12-18
Hi, i have added a few media queries to my site in order to make it more mobile friendly, and in particular for when a user is making a donation.

Does anyone know if it is possible to disable auto zoom for a text box when a user clicks into a text box / area on your website via iPhone / Android?

I've read that making the font size bigger in your media query will stop the auto focus... i've increased the font size and it seems to do the trick on iPhone browsers but it seems to have got worse (zooms in more) on Android browsers.

Please click on the link below on your mobile and then click 'Make A Quick Donation', and then click into the text area to see what i mean:

https://www.icharityu.com/mission?r=99

Thanks in advance for your help...
0
Comment
Question by:oo7ml
  • 6
  • 4
  • 3
  • +1
17 Comments
 
LVL 34

Expert Comment

by:Big Monty
ID: 39616634
did you try:

input[type='text'],input[type='number'],textarea {font-size:16px;}
0
 

Author Comment

by:oo7ml
ID: 39616666
Can you elaborate on this a little please, as mentioned above I have increased the font over 16px - however not sure what you mean exactly
0
 
LVL 34

Accepted Solution

by:
Big Monty earned 1400 total points
ID: 39616686
my apologies, I missed that part in your post, morning coffee hasn't kicked in yet :)

There seems to be no fix for this in android devices, only on the iPhone
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 600 total points
ID: 39616709
You are going to have all kinds of problems with that page.  The HTML validator throws 38 errors.  Most of them are because you are specifying that it is an XHTML strict document and you are using frames.  

The page will never be relaiable with that kind of inconsistency.

I suggest you fix the errors before you try and fine tune the CSS.

validator output:
http://validator.w3.org/check?uri=https%3A%2F%2Fwww.icharityu.com%2Fmission%3Fr%3D99&charset=%28detect+automatically%29&doctype=Inline&group=0

Cd&
0
 

Author Comment

by:oo7ml
ID: 39616834
Thanks @The_Big_Daddy

@COBO - "all kinds of problems with that page" -  i haven't had any other problems other than what i have described above and i am sure none of those validation errors contribute to my original question.

How much attention and energy do major websites put into valid markup anymore. I am not saying Facebook are a good example to follow, but they just returned 37 errors... Twitter returned 13 errors...

I have tested the site in numerous different browsers on many different platforms and yet to find any problems that relate to valid markup... no major website that i am aware of passed these tests as they "seem to behind on technology".
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39617086
@oo7ml,

You can do whatever you want.  However every decision carries consequences. You are the one who needs to seek help with Web development issues.  We are just here to respond to that and each of us individually sets the terms under which we commit our time. I use a standards based approach that has managed to provide a solution around 7,000 times.

Quite frankly I don't care what happens to your site.  However I assume you do care.  The invalid code reduces your rankings with Google.  It also may result in incomplete indexing because the spiders crawl in much the same way as validators, but rather than reporting errors spiders may simple abandon the crawl. Because browsers try to work around errors there is no guarantee of how errors will be interpreted in current or future browsers.

Most important of all Facebook and Twitter can do whatever they want because they already have massive traffic and the need to optimize for performance; not attracting traffic. You are losing traffic because you have reduced accessibility, usability, and reliability that Google has raised in importance in the updates of Feb 2013, May 2013, and Sept 2013; and has made it clear that those will continue to be the primary modifiers applied to content quality.

So feel free to put anything you want on the web.  However anytime you ask a question in one of my topics here or on other sites where I participate; I will point out the errors you should be fixing.

Cd&
0
 

Author Comment

by:oo7ml
ID: 39617103
No need to take it personal... i was just pointing out that the errors have nothing to do with the question raised.

Further to your reply... we don't rely on traffic hitting our website from a search engine.

I am all for fixing these errors, but i would like to fix the original problem / post question.
0
 
LVL 43

Expert Comment

by:Rob
ID: 39674883
I've requested that this question be deleted for the following reason:

The question has either no comments or not enough useful information to be called an "answer".
0
 
LVL 34

Expert Comment

by:Big Monty
ID: 39674884
I confirmed with my link that what the OP was asking to do was not possible. Surely that would be useful to someone in the future?
0
 
LVL 34

Expert Comment

by:Big Monty
ID: 39708521
I understand that, but it was the only place I could find that validated the answer by a large group of people. How should I have answered that if that was the only thing I could find and I don't have (easy) access to a test environment for a demo?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39709405
@The_Big_Daddy,

That site is neither reliable nor authoritative. Even if it was not a competing site, it is not the kind of resource I would rely on considering the low quality of the content.

The problem with NO as the answer is that you can never definitively prove a negative, and some questioners who are disrespectful and impolite will not take no for an answer.  just check profiles. If they delete a lot, abandon questions like has been done here, and give bad grades then just put them on a list of the members you won't waste time trying to help in the future.

Cd&
0
 
LVL 34

Expert Comment

by:Big Monty
ID: 39709638
fair enough, although I do find some useful threads on the site, I don't necessarily believe it's all low quality. With links to other threads of the same topic, and other people giving the same answer, I took it as valid.

I do usually check the profiles of people I'm not familiar with, although sometimes it slips my mind.
0
 

Author Comment

by:oo7ml
ID: 39713802
I have done a lot of research on this and it really seems like this is not possible... i am therefore happy to give the points to @The_Big_Daddy as i have enough evidence that this cannot be achieved.

Waiting for moderators to reply before awarding points.
0
 
LVL 34

Expert Comment

by:Big Monty
ID: 39714025
i'm not all that concerned about the points, i'm on EE to help out people just like they've helped me out. I just brought it up because I figured there wasn't that much data on the subject, and it may prove useful to someone else if they run across the same issue.
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

927 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question