My front-end works with bootrstrap3.
Firstable I had responsive issues on mobile device that I fixed by adding the meta below:
<meta name="viewport" content="width=device-width, initial-scale=1">
That works well but I have still a strange issue. Most of times, by landing on a page on mobile device, the zoom is lower than 100%.
Actually, what I note is that when the issue is happening, the whole page is displayed on the viewport, so that the zoom is adapted to the total height and width of the page.
If anyone has a solution to fix this issue that would be great.
Try adding the following to your head-tag:
<meta name="viewport" content="width=device-width, user-scalable=no" />
For Mobile Safari in iOS 4.2.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
We are disabling zoom on a mobile web based application. You can't zoom in Native iOS apps and it's not required in our web application. If your site or app is mobile optimised then your users won't need to zoom. There are always use cases for disabling zoom. It doesn't have to always be one way or the other.
Related
So we're making our site mobile friendly but we're not even close to being done yet. Our desktop version works well but has big tables (that we are getting rid of -- slowly). In the meantime our mobile frame <section> cuts off our content. We would like it to show everything and just allow the user to zoom and pinch and scroll on their device like other non-mobile friendly sites. How do we do that? We have tried <meta name="viewport" id="view" content="width=device-width minimum-scale=1, maximum-scale=1" />
with no luck. Thank you!
This is what I use on almost all of my sites
<meta name="viewport" content="width=device-width initial-scale=1.0">
Edit: changed width
Everytime I load my site on Chrome for Android it either loads zoomed, or not at all ( ex: it will display half a text object and stop). I have tried every metatag under the sun to fix it including:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
and every combination of 1's and 1.0's I could think of. Site loads fine on chrome and safari for iOS, and on my nexus s stock browser. The only other clue I can think of is when the site loads zoomed in I can scale it back (pinch zoom) which I disallow in my metatag. It's like its not reading it or stopping short somewhere. Any ideas?
I have browsed through many topics here and on the web, trying to solve my issue. I'm very close to finding a solution but there is one thing that is still not working correctly.
I have a mobile website that is 640px wide. It should:
Show zoomed in on all browsers correctly, also when changing the orientation of your device
User should not be able to zoom in (input fields neither).
I have used this viewport meta tag to accomplish this:
< meta name="viewport" content="width=640,maximum-scale=0.5,initial-scale=0.5, minimum-scale=0.5" />
This works great on Android, both portrait and landscape. It works great on iOs on portrait too, but it shows the site zoomed out on landscape, so it's not adapting to the width of the phone, but keeps the original portrait size. I have tested this on iPhone 5 and iPhone 4S.
I have found mostly issues with responsive websites and not so many with fixed mobile websites. Is there a solution for my problem by changing the viewport meta tag? Or should I be looking into javascript to solve this?
Thanks in advance.
Edit:If anyone is interested, I used this bit of code in Coldfusion which is working perfectly fine now (iOs & Android):
<cfif findNoCase('iPhone', cgi.http_user_agent,1)><meta name="viewport" content="width=640" /><cfelse><meta name="viewport" content="width=640,maximum-scale=0.5,initial-scale=0.5, minimum-scale=0.5" /></cfif>
I tend to use those lines in my head to optimize responsive sites:
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
Maybe adding those will fix your problem?
I know from experience, that iOS Safari behaves strange in some cases. Here is a line that I use to fix some other issues I had with it before:
<!-- This script prevents links from opening in Mobile Safari. https://gist.github.com/1042026 -->
<!--
<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
-->
Alternatively you can try running your site as iOS Web-app:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="">
Hope that some of that will fix your problem:)
I'm building a mobile site and have the following meta tag set in the header:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Unfortunately, this isn't working on HTC devices (HTC Hero, etc) with Android 2.1. Any ideas on how I can disable pinch-to-zoom in this browser? Works fine on the iPhone.
I have contacted HTC about this issue and they have informed me that they don't have support for the viewport meta tag at all and there is no other way to disable zoom.
Quite disappointing.
This works on the default android and iPhone browsers. Although sadly it doesn't work for HTC's custom browser (as asked).
<meta content='True' name='HandheldFriendly' />
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />
Just an idea, maybe not useful (not tested) :
Did you look into javascript support in Android's WebView? I think you might be able to call WebSettings.setBuiltInZoomControls(false); which might do what you need.
I've also played with this a LOT, and found no combination that actually disables the zoom.
You can however set the initial scale of the page, so when the user access it, it is in the correct zoom level.
The default zoom level for android browsers is "medium", but as mentioned, if the user changes this in settings (or pinch zooms), it will not be prevented.
The web-site I'm working on is specially designed for Android. The user will not get benefit from Android build-in zoom buttons. On the contrary they make a mess.
How can I switch them off?
the following code casts magic
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>