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">
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've made a mobile version of a webpage and it works on Android and small browser windows without problems.
On iOS however, when a user pinches the screen, it zooms out to fit the entire page on the screen. It's a long page, so this is not ideal.
I have the following in my head:
<meta name="viewport" content="width=device-width,
initial-scale=1.0, user-scalable=no, shrink-to-fit=no">
I'm aware that iOS 10 has a known issue with overriding user-scalable=no, but this is happening also on iOS 9 and 8.
Does anyone have any ideas how I might be able to solve this?
Many thanks
The correct format of that meta tag is as follows:
<meta content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0,width=device-width" name="viewport">
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/
According to this https://bugs.webkit.org/show_bug.cgi?id=88047 WebKit dropped the support for target-densitydpi from viewport params. Unfortunately, the bug description states neither the motivation for the change, nor the workaround.
Certain web-pages that wanted to prevent scaling on mobile devices had the following declaration of the viewport:
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,
user-scalable=no, target-densitydpi=device-dpi"/>
Now this code outputs an error in Chrome (tested with 21.0.1180.49 beta-m). Please advice what is the supposed way to make a web-page without the error messages and retain the same behavior as before with target-densitydpi=device-dpi"
I achieved the same thing on the latest Chrome for Android using this jQuery:
<meta content='user-scalable=no, initial-scale=1, width=device-width' id='viewport' name='viewport'>
var viewPortScale = 1 / window.devicePixelRatio;
$('#viewport').attr('content', 'user-scalable=no, initial-scale='+viewPortScale+', width=device-width');
This sets the initial-scale viewport meta tag setting to the correct scale for 1 CSS Pixel == 1 Device Pixel.
You can't use 'width='+screen.width because screen.width doesn't return the physical pixel dimensions. I tried using http://responsejs.com/labs/dimensions/ on my Nexus 7 in Chrome and all the numbers are viewport pixels.
The webkit-dev mailing list thread http://lists.webkit.org/pipermail/webkit-dev/2012-May/020847.html contains a discussion (or at least the background) of the feature removal.
In short, WebKit had a few means of scaling the page when rendered on a device, and this was highly confusing (even more so given that each platform relied on its own approach to this.)
UPDATE:
According to a comment on the said thread by Adam Barth, the mentioned patch author,
There's some concern that target-densitydpi is used by some apps that
are bundled with Android, but folks appear willing to deprecate the
feature and to migrate those apps to using other mechanisms, such as
responsive images and CSS device units.
As you can see, responsive images and CSS device units appear to be the recommended "workarounds" for what the target-densitydpi attribute provided. Also, another comment on the same thread mentioned the fact that even with this attribute in place, web developers would have to reimplement the same page in another way, for browser environments that do not support the attribute.
I believe the recently introduced subpixel layout will become another means of mitigating the attribute removal issue.
UPDATE 2
This blog post suggests an alternative way to laying out your page for Android Chrome. There is NO workaround that will automagically let you "retain the same behavior" of your pages. You just have to re-architecture them a bit.
I'm not sure, but maybe it's possible to emulate target-densitydpi by setting "width" in viewport metatag to be equal to screen width in "physical" pixels. Unfortunately, AFAIK, there is no 100% way to get device pixel width, but something like
<meta name="viewport" id="metaViewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script>
if(navigator.userAgent.toLowerCase().indexOf('android') > -1)
document.getElementById('metaViewport').setAttribute('content', 'width='+screen.width+', initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
</script>
should work on most Androids (James Pearce: First, Understand Your Screen).
Have you tried adding minimum-scale? Unfortunately, I don't have an android phone, so I can't test it for you.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
I am designing a mobile website and I first tried just to use a regular html page with a h1 tag. It looks very tiny so I searched and found out that I need to add these lines:
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
After trying several web pages to understand it, I still am confused. Is the viewport an additional device-width that on for example iPhone is 960px? Even though the iPhone 4 is only 640px so it scales it down to emulate that size? So in order to prevent it from thinking the viewport is 960px it says that it is equal to the size of the screen?
If this is the case, does other browswers/devices such as Android running devices have different widths (other than 960px)?
Per the jquery mobile documentation, there is a bug for iOS with this:
There is a minor issue in iOS that doesn't properly set the width when changing orientations with these viewport settings, but
this will hopefully be fixed a a future release. You can set other
viewport values to disable zooming if required since this is part of
your page content, not the library.
They recommend the follow line:
<meta name="viewport" content="width=device-width, initial-scale=1">
You also don't need the user-scalable either, the above line won't disable user zoom.