I have my site up at Isotope Labs.
It uses a mediaquery to detect mobile and set a mobile stylesheet (mobile.css) with body width of 100%.
The scripts.js file disables the jQuery scripts for mobile devices too.
It all works, except I can't seem to disable zooming on mobile devices properly.
I have used the following in my HTML head (after trying very many alternatives) to disable zooming for mobile:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimum-scale=1" />
On iOS and Chrome Mobile for Android, it still allows zooming. It does apply the mobile stylesheet, but it doesn't look quite right (text appears too small).
It actually works on Android's stock browser, although every time you hit refresh it alternates between looking right, and behaving exactly like Chrome and iOS.
I've gone through and deleted everything from the head, but even if I strip out all of the javascript and CSS, it still allows zooming.
This is driving me insane. Any ideas?
You appear to be setting the meta tag in a child frame, not the root page. When viewing the full-page frame url directly, zooming is prevented.
Related
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'm getting some weird behaviour that I'm not sure why it's happening.
I'm building out an site. When running this locally in Chrome and Safari, it displays fine, everything adjusts as you'd expect. However, in responsive mode, and when viewed directly on mobile, the entire site is scaling down in size to fit. By this I mean the entire site every element all reducing in size to to be shown as it looks at desktop size.
I'm using Bourbon/Neat, with a bit of flexbox here and there, which I have done many a times before. I've just never experienced this. Any ideas?
You likely need to add
<meta name="viewport" content="width=device-width, initial-scale=1">
to the <head> section of your html
Jordan's answer is in the right direction but it didn't work for me.
There is another post here on Stackoverflow that has a more comprehensive meta tag, that fixed it for me:
Small fonts in mobile website
I am testing out Bootstrap responsiveness navbar and I have a demo website. When I resize the browser on a desktop, it all works fine including the nav bar which become collapsible menu with a small icon on the top which I can click to see more menu buttons.
But when I tried it from a mobile browser (I tried it on chrome and internet browser on an Android), I didn't see the responsive design. I could only see very small version of desktop like website.
Could anyone point out what I am doing wrong?
Add this to your HTML head..
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This tells smaller device browsers how to scale the page. You can read more about this here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
as suggested here http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
<meta name="viewport" content="initial-scale=1">
would be an even better choice as it makes going from portrait to landscape and back a much more pleasant user experience as with/height would adopt naturally because of the possible auto-scaling.
Adding this for people searching this error for whom the accepted answer is not working. I believe this will be a rarer, but nonetheless frustrating case:
If your page is rendering inside a frameset (for example domain cloaking), then putting the meta tags won't help. You would need to put them in the page on the cloaking domain, which you may or may not have access to depending on your DNS host.
Try clearing your browser's cache and open the page in a fresh tab. This sometimes resolves the issue for me whenever it happens.
We have built a website using Bootstrap 3.3. The website appears fine On Desktops and Tablets and on Android devices, but on Iphones it seems to load the website zoomed.
i did put the below meta tag
<meta name="viewport" content="width=device-width" />
If i put initial-scale=1 or minimum-scale = 1 or maximum-scale = 1, the website loads zoomed on both iphone and android. If i do not have them it loads zoomed only on iphone.
Can anyone suggest what the issue is and how i can resolve it
how to use viewport
The page is not responsive ... it is a real shame! Google it will take into account and will penalize your rankings
English info about the viewport meta tag
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Naviego is right. I know by your comment that your client wants to have the responsiveness removed but whats the reason? He is right that google will penalize your ranking if your website is not mobile friendly. You should check it out..
https://www.google.com/webmasters/tools/mobile-friendly
I tested it for you, and it says that your content is too big for a mobile screen, as you can scroll to the right.
So i have a website that I am working on, when I use the "phone icon" on google chrome inspector the site looks ok, it switches to the responsive mobile design, but on my phone it's showing the desktop version.
The styles are in the same file desktop&mobile. I have tried on other phones and it loads the desktop instead of mobile.
I don't even know what to do, how to debug, I tried and cleared the cache on my phone, added a ?v= to the css file, still nothing.
Do you guys had any problems like this? What was the solution?
Did you use the viewport meta tag ?
Like this one:
<meta name="viewport" content="width=device-width, initial-scale=1">
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag