Solved

Disable Auto Zoom On Text Box / Area

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

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 33

Accepted Solution

by:
Big Monty earned 350 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
ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 150 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 42

Expert Comment

by:Rob Jurd, EE MVE
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 33

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 33

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 33

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 33

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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Add box and text color changing for everything 1 26
add image on html mail 6 19
JavaScript let vs var 5 26
Call a function within the ASP code 4 12
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

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