I want to use viewport to support responsible layout, but when I zoom out, the size doesn't seem to fit for the screen.
When I remove the viewport tag, all I see on my phone is like a computer-browser's style, and when I zoom in, it just makes everything bigger(but I think it should apply the responsible CSS).
Why it doesn't change the layout? I tried on computer through changing the browser's size and it works well.
---add---
the viewport tag is : <meta name='viewport' content='width=device-width, initial-scale=1.0'>
Related
<div class="container">
I have simple container class.
I read the documents and understand.
It has both side spacing for PC screen, and it has full width for mobile screen.
However in my iphone simulator, it dosen't become full width, it remains spacing both side.
(I guess it is because of iPhone high resolution??)
If I use container-fluid, it becomes full-width on iPhone Sim.
I want to have with spacing on PC and full for mobile.
What is the best practice???
Try adding a meta tag with viewport inside your <head> tag.
This tells smaller device browsers how to scale the page.
It is more explained here.
https://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972
<meta name="viewport" content="width=device-width, initial-scale=1">
The goal is to display a non-responsive website fully zoomed out on iPhones. In other words, the site should initially fit an iPhone screen without horizontal scrolling, then user can pinch to zoom in.
Normally, i don't need a viewport meta tag for that. When there's no viewport meta tag, the site will automatically be zoomed out to fit a mobile screen without horizontal scrolling.
But not when the site is wider than ~1000px! When it's wider, only the first ~1000px fit horizontally and horizontal scrolling appears.
Only iPhones have this behavior. On Android it's fine.
I tried to force a viewport with a corresponding meta tag and discovered that iPhone only respects the meta tag if its value is below ~1000.
E. g. if i set...
<meta name="viewport" content="width=500;">
...the site is zoomed to 500px. If i set width=900, the site is zoomed to 900px.
But when i set it to...
<meta name="viewport" content="width=1400;">
...then the site displays as if the width was 1000 or so.
Again, Android respects any width correctly.
The question is: how to i fit 1400px wide site into an iPhone screen, so that there's no horizontal scrolling when it loads initially, until user pinches in to zoom?
Here's a demo to fiddle with: http://jsbin.com/luqari/edit
Ok, i got this.
According to Safari Web Content Guide,
The default value for minimum-scale is 0.25
Thus, a larger zoom level is enforced by default. So we have to loosen the minimum scale setting:
<meta name="viewport" content="width=1400; minimum-scale=0;">
I'm using the line
<meta name="viewport" content="width=device-width;">
but it doesn't seem to want to actually work in dolphin or the android stock browsers.
has anyone had this experience or is viewport just not compatible with those browsers?
EDIT: I am looking to set the browser to show 100% of the page, no zoom, just page. Setting the scale does the reverse of what I need and the users need to be able to zoom.
W3C recommends this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
yes, I am aware, that it is from 2010 but I couldn't find a newer version
And it works for all androids I ever tested; also for dolphin. If you want to be really sure that even very outdated microsoft devices get it, you could also add:
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
At least it won't hurt to use all three, even though probably the last two will almost never be relevant.
EDIT: Turns out the opposite of what width=device-width does is requested. The thing is: Having zoomed out is the default behavior of every mobile browser, considering the content doesn't fit. Anything else would be counterproductive. I tried it with dolphin on various sites without any viewport-meta and it works as intended. So your content actually seems to fit, what means your documents width is indeed equal to or smaller than the device-width. That is for example the case, if you ...
... float crucial elements of your page contents
... fill your content via JavaScript (/Ajax) afterwards
... have crucial elements absolute positioned
... have negative margins on some crucial elements in your content
... have a dynamic page width, that scales to the windows width
Of course there are more possibilities. Unfortunately body { min-width: 800px; } (or whatever you want to be the min-width) is the only solution that comes to my mind, at the moment.
If your content has a static width, you could try
<meta name="viewport" content="width=980px" />
with 980px being your page width. But actually in that case, the documents width should be at least 980px anyway. So the viewport width should not be possible to achieve what you want.
Researching viewport behaviour, I've hit a bit of a snag in understanding the meta viewport declaration.
I see width=device-width and initial-scale=1 used together a lot but, as far as I can tell, the latter implies the former.
MDN also mentions that defining both a width and initial-scale=1 will result in the width acting as a minimum viewport width. If this is the case then is there any need to define the width as device-width? Surely the initial-scale can't be 1 with any layout viewport smaller than the device-width anyway.
Am I missing something or is defining the width as device-width redundant here?
Thanks
Using both width=device-width and initial-scale=1 ensure cross browser/device compatibility. For example, for iOS devices, initial-scale=1 is needed for your page to pick up on orientation change of the device as width=device-width will not. Using both ensure maximum effectiveness using the meta viewport tag.
The 2 tags are not the same.
The 'width=device' tag tells the browser to use the device's real width as the 100% width of the screen. If you omit it, a mobile device will simulate as if it has higher resolution and your content will not be stretched to full width.
The initial-scale is the zoom level on first load. If it is set to 1, along with 'width=device', then the content will not be zoomed out or in. You will also not be able to zoom out more than the initial scale (but you will still be able to zoom in). That will be as if you set 'minimum-scale' to 1 as well.
There is also a 'maximum-scale' and if you set it to 1 as well, the user will not be able to zoom in more than the initial scale.
This is an example of how you can create an 'app-like' feeling, where the content uses the device's width in a 1:1 ratio.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
Hope this helps!
I have an iPad application that displays email newsletters. This HTML content is pulled and embedded inside a WebView. Most newsletter widths are 650px but some are around 900px.
By default, they display too small (iPad device width is 768px) so I want to make it zoom to fill the page (I am concerned with the width only - vertical scrolling is ok).
Using the viewport meta tag, if I hard-code 650px as the device width, it will cut off the 900px-wide newsletters. Also, setting an explicit width disables resizing the viewport:
<meta name="viewport" content="width=650, initial-scale=1">
However, if I set it to variable device-width, the campaign is 'squeezed' by the screen and displays off-center:
<meta name="viewport" content="width=device-width, initial-scale=1">
Is there a way to dynamically specify the width, so that it sets it as 650 if the campaign is <= 650, and 900 otherwise? In essence, I'm trying to set a fixed viewport dynamically based on the newsletter width. Could I use the #viewport CSS rule instead?
I ended up resolving this issue using the strategy from my other similar question:
Stretch/Fit HTML Template and Children to Window
Instead of changing the viewport meta, it turned out better in my case to dynamically scale the newsletters using JS once they were loaded.