Is there any way to restrict the user to zoom in/out on a webpage, on laptop/desktop
I tried working out the below code:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0">
That works fine on mobile but fails on laptop/desktop.
The viewport meta tag doesn't affect desktop browsers. It is purely for targeting mobile browsers.
You can use the following CSS to try and prevent text zooming in desktop browsers:
<style type="text/css">
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
-moz-text-size-adjust:none;
text-size-adjust:none;
</style>
However, this is experimental only and widely unsupported; See Moz Developer Network:https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
Personally, I think that preventing a user from zooming in a browser will lead to awful accessibility. Some users need to zoom in to consume content on the web.
If you're interested in creating a webpage that functions correctly and is still accessible, check out the W3 accessibility guidelines: http://www.w3.org/WAI/intro/accessibility.php and check your pages with Wave:http://wave.webaim.org/
Related
Trying to find a way to prevent user to be able to zoom in a web page in latest ios and android.
I tried:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no">
...also:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0">
...and:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
But it is still zoomable
Any others solutions ?
Thanks
This actually depends on the version of the browser you are using ,with each browser version having its own html code for restricting zooming.
If you use android 2.2 or below It is not supported at all
Android 2.3.x/3.x: By setting user-scalable=no you disable the scaling of the viewport meta tag yourself as well. This is probably why your width option is having no effect. To allow the browser to scale your content, you need to set user-scalable=yes, then to disable zoom you can set the min and max scale to the same value so it cannot shrink or grow. Toy with the initial scale until your site fits snugly.
Android 4.x: Same rule apply as 2.3.x except the min and max scales are not honored anymore and if you use user-scalable=yes the user can always zoom, setting it to 'no' means your own scale is ignored, this is the issue I'm facing now that drew me to this question... You cannot seem to disable zoom and scale at the same time in 4.x.
iOS/Safari (4.x/5.x tested): Scales work as expected, you can disable scaling with user-scalable=0 (keywords yes/no don't work in 4.x). iOS/Safari also has no concept of target-densitydpi so you should leave that out to avoid errors. You don't need min and max since you can switch off zooming in the expected manner. Only use width or you'll run into the iOS orientation bug
Chrome: Scales work as expected like they do in iOS, min and max are honored and you can switch off zooming by using user-scalable=no.
Conclusion: You can use some fairly simple JS to set the content accordingly after some basic browser/device detection. I know this type of detection is frowned upon but in this case it's almost unavoidable because each vendor has gone and done their own thing! Hope this helps people fighting the viewport, and if anyone has a solution for disabling zooming in Android 4.x WITHOUT the use of the viewport, please let me know.
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />
Android 4.x Chrome browser (which I think is pre-installed in most countries): You can make sure the user cannot zoom and the page is fullscreen. The downside: you have to make sure the content has a fixed width. I haven't tested this on lower Android versions. To do this see the example:
<meta name="viewport" content="width=620, user-scalable=no" />
iOS/Safari 8 Beta 4: There was a meta tag minimal-ui which worked fine in ios 7 versions ,however it has now been removed by Apple in this release.
I am in the process of improving the accessibility of a web app, and one of the critical issues I have identified is the presence of user-scalable=no and maximum-scale=1.0 in this tag:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
I understand why these attributes are an accessibility concern, and would like to remove them, but would like to test the "before and after" effects of the attributes and the lack of these attributes. However, I am having trouble figuring out how to test. My understanding is that the presence of these attributes will prevent a user from e.g., zooming the page, enlarging fonts, etc. However, in the app in question, they don't appear to have any effect on these things: I am able to zoom, enlarge fonts, etc. on both mobile and desktop in Chrome and Safari.
How can I go about testing the affects of user-scalable=no and maximum-scale=1.0 so that I can resolve any issues that removing the attributes might create?
I read this article https://css-tricks.com/snippets/html/responsive-meta-tag/ and followed tips by W3Schools, but I'm still confused with initial-scale=1.0.
I don't see the difference between this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and this:
<meta name="viewport" content="width=device-width">
I tested these code snippets in many browsers, and I cannot determine which one I need to use. If I omit initial-scale=1.0 will browsers somehow add it for me? It looks they will.
The "initial-scale=1.0" part sets the initial zoom level when the page is first loaded by the browser. "width=device-width" sets the width of the page to follow the screen-width of the device, depending on what they are using.
Here is a good link to read up on it:
https://www.w3schools.com/css/css_rwd_viewport.asp
"On high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties. This is consistent with the CSS 2.1 specification, which says:" - MDN ,
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
I did use initial-scale=1, but I noticed that removing it - against recommendations on CSS Tricks and by the authors of UIkit (v2) - gave me a perfect, as-expected, initial scaling on page load using Chrome on Android and with the Silk browser on a Kindle. Including initial-scale=1 meant the pages were loading at some semi-random zoom level, which looked amateurish. Edge, Chrome and Firefox desktop browsers are fine, but I haven't tested more widely on mobile devices yet.
For Android, I'm leaving initial-scale=1 off and I'll need a very good reason to put it back on again.
<meta name='viewport' content='width=device-width'>
CSS tricks actually uses the above on its own (very fine) site
Just use initial-scale=1.0
You would see the difference when viewing your website on different mobile devices.
For example the page being a way larger width of the screen and you have a horizontal scrollbar. You may think use overflow-x: hidden but no just set the initial scale to 1 for all devices in the head
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I have a blog website where I used the viewport property to scale the site in mobiles, it was working perfectly using:
<meta name="viewport" />
Then it stopped working for no reason, didn't touch the code at all. Now I've been trying with everything I find online, from max-width to initial-scale, etc. Still doesn't work.
What could be happening? Is there any update that cancelled the viewport property?
My website: www.fake-leather.com
If you are not coding a responsive site, just don’t use any meta viewport. If you are coding a responsive website, all you need to write is
<meta name="viewport" content="width=device-width, initial-scale=1">
Any additional parameters in the content attribute usually screw up user’s experience.
Reference: Stop using the viewport meta tag (until you know how to use it)
i am having an issue with most of my new sites which use H5BP when viewed from Windows Phone 7 (or 7.5). The problem is that this HTML tag in the site's source
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
which should actually support different mobile devices, prevents the user of a mobile device (in our case Windows Phone 7 or greater user) to zoom in on the text (and the site itself).
Using this tag the mobile browser will adjust the size of the site according to the mobile viewport (i.e. mobile screen width and height). However, the problem is, when the user tries to zoom in on the text using the zoom-in gesture, the zooming doesn't work. It tries to zoom in but quickly returns to the initial width.
Has anyone else noticed this problem and if so, what is the solution?
You may want to test adding user-scalable=yes to see how Windows Phone handles the tag.
Although the tag is supported by almost all mobile browsers it isn't a standard tag (originated on the iPhone) so the implementation may differ. I find that Safari has the best documentation on the tag and as such I sourced it below.
This tag should be worth testing:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
Source: Safari Documentation.
Additional resource: IE Mobile Viewport via Windows Phone Team.
I don't have a windows phone to test but perhaps adding the user-scalable=yes may help on windows mobile.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">