Solved

Disable Auto Zoom On Text Box / Area

Posted on 2013-11-01
17
1,407 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 32

Expert Comment

by:Big Monty
Comment Utility
did you try:

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

Author Comment

by:oo7ml
Comment Utility
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 32

Accepted Solution

by:
Big Monty earned 350 total points
Comment Utility
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
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 150 total points
Comment Utility
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
Comment Utility
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
Comment Utility
@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
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
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 32

Expert Comment

by:Big Monty
Comment Utility
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 32

Expert Comment

by:Big Monty
Comment Utility
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
Comment Utility
@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 32

Expert Comment

by:Big Monty
Comment Utility
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
Comment Utility
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 32

Expert Comment

by:Big Monty
Comment Utility
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

772 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now