I have a responsive website which behaves properly on different screen sizes. On a desktop browser, when I zoom in (making the viewport smaller) or out (making the viewport larger), the layout renders properly on the adjusted viewport.
However, when I pinch zoom in on the mobile device, it seems that the viewport size doesn't change, that I still need to scroll horizontally to view the content, and I can't pinch zoom out to increase the viewport size at all.
What should I write in my HTML or CSS in order to make the viewport size change while pinch zooming in or out on the mobile screen, such that the physical viewport is always equals to the screen size no matter the zoom ratio?
Related
I'm working on a semi-responsive web design that adapts (has responsive behaviour) to any screen width above 480px. However, my layout can't adapt to fit a screen width under 480px. Below that point, I would like the mobile device to work its magic and zoom out the page content (scale it down) so it fits the device width without the need for horizontal scrolling.
I've read both Android and IOs documentation on the ViewPort meta tag and tried many different combinations. The code below will let the layout responsive behaviour "work" when above 480px and then it will zoom out to fit screen width when below 480p, as expected.
<meta name="viewport" content="width=480">
However, if zoom is applied by the user it will save that state for the current mobile browser window and horizontal scrolling will be shown and will not go away unless the user manually zoom out. It won't reset to the expected zoom even if the user reloads the page. At least, that's the behaviour when tested on iPhone. I don't know where to test it for different Android resolutions.
<meta name="viewport" content="width=480, initial-scale=1">
If I add initial-scale, as seen above, the zoom will reset when the page reloads, but since its set to 1 it won't scale down to fit the device width without horizontal scrolling. Instead, it will have 100% width (480px) and show horizontal scrolling on screens under that resolution.
I would like to understand more about ViewPort meta tag behaviour on different devices based on its attributes so I can be sure to have the results I expect in all devices and resolutions. In this case, I want to keep it responsive above 480px and let the mobile device scale it down below that so it fits the device width without horizontal scrolling. Can it be done using only the ViewPort meta tag? If not, I would prefer a solution without having to use any JS library, if possible.
What is my phone real resolution? The resolution that CSS detects.
The phone is a Samsung S6. Its factory specifications show a resolution of 1440px x 2560px.
How ever when I use css #media(max-width:...px) to detect the screen resolution, the mobile browser acts as if it's somewhere between 768px and 991px width.
Using Google chrome inspection tool and toggling to mobile view, it shows that a Samsung S5 has a resolution of 360px x 640px.
So where is the real resolution in all of this?
Screen size and screen resolution are NOT the same. You seem to be confusing the two.
Google's web developer tools detect the screen size (as in the width of the screen) as opposed to the screen resolution.
Screen resolution refers to the clarity of the text and images displayed on your screen.
At higher resolutions, such as 1600 x 1200 pixels, items appear sharper.
To summarise; the google inspection tool picks up the physical screen size of devices and emulates them, it does not emulate the screen resolution which is essentially the quality of the output of text/images.
The accepted answer seems to be incorrect.
#OP here's what you need to know:
Screen size is the physical size of the screen, and is measured in inches.
Screen resolution is the number of pixels making up the screen, and is measured in pixels.
Your phone has a resolution of 1440x2560, as stated in the spec sheet.
So why does CSS act like the resolution is lower? It's because the contents of the screen that you are seeing on your mobile device are zoomed in.
This is done because showing text etc. at 100% size on a 1440x2560 display that is only ~6 inches would make the text so tiny as to be illegible.
So, if the amount of zoom is 200%, CSS thinks the screen is 720x1280. If 400% (as seems to be the case with your phone), CSS thinks 360x640. And so on...
When I use
.class { width: 800px; }
what does it actually mean?
When I view it on my laptop screen, it shows up exactly 800 pixels wide. When I view it on my tablet screen, it shows up as 1600 pixels wide. I am guessing because my tablet might have a higher pixel density. However, the physical (when compare side-by-side) width of the element if much smaller on the tablet than on my laptop
So, my question is: When I define a dimension in CSS to an HTML element, what is the reference? How is it computed or scaled on different displays?
The reference is a logical coordinate system that might be scaled in relation to the physical screen.
It's most common on a PC that the scale is 1:1. However as screens get larger it's becoming more common with computers that have scaled up display, which may also affect the browser.
The user can also zoom in the browser, which natually affects the scaling.
Devices like tablets and phones usually have a 2:1 scaling in the browser, sometimes even more. That means that the browser reports a smaller screen size, and everything is scaled up. This also affects the media queries, so even if the physical screen is larger, your CSS might not apply as the media query uses the screen size that the browser reports.
Also, if you don't lock the viewport using a meta tag, the mobile browser will scale the page to fit the screen, so whatever page width you specify will show up the same size.
I have a responsive website where the first div on the site fills up the entire height of the browser using height: 100%. Mobile Chrome Browser unfortunately hides the address bar on some devices including iPhone, iPad and many Android devices. This leads to a page jump because right after scrolling the height of the window grows plus the height of the address bar.
How do I prevent this?
Thank you!
Write some JS to determine the window size and set the height to that pixel value instead of a percentage. Make sure to handle orientation change events to account for that scenario as well.
What is the Difference between visual viewport and layout viewport for a mobile device like iPhone/iPad?
I have gone through a lot of online resources, but am still unclear about it.
The visual viewport is the part of the page that’s currently shown on-screen.
The layout viewport can be considerably wider than the visual viewport, and contains elements that appear and do not appear on the screen.
Imagine the layout viewport as being a large image which does not change size or shape. Now imagine you have a smaller frame through which you look at the large image. The small frame is surrounded by opaque material which obscures your view of all but a portion of the large image. The portion of the large image that you can see through the frame is the visual viewport. You can back away from the large image while holding your frame (zoom out) to see the entire image at once, or you can move closer (zoom in) to see only a portion. You can also change the orientation of the frame, but the size and shape of the large image (layout viewport) never changes.
For a great treatment of the issue, see: http://www.quirksmode.org/mobile/viewports2.html
A very good explanation of the two is found here.
In summary:
Visual viewport
The visual viewport is the part of the page that’s currently shown on-screen. The user may scroll to change the part of the page he sees, or zoom to change the size of the visual viewport.
Layout viewport
However, the CSS layout, especially percentual widths, are calculated relative to the layout viewport, which is considerably wider than the visual viewport.
Thus the element takes the width of the layout viewport initially, and your CSS is interpreted as if the screen were significantly wider than the phone screen. This makes sure that your site’s layout behaves as it does on a desktop browser.
How wide is the layout viewport? That differs per browser. Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.
In short, the layout viewport is generally the width of the viewport when the screen is zoomed all the way out.
Layout viewport
Its measurements are always the same regardless of orientation or zoom level, just depend on the device/browser window.
Visual viewport
It varies (when zoomed for example). This is the part of the page that’s actually shown on the screen at any given point.
Video example of both layouts
Layout viewport: The green area in the minimap.
Visual viewport: The red box in the minimap.
Layout viewport vs visual viewport (video)
On Mobile/Tablet devices
On mobile devices, things can be a little more complicated by default, because in order to allow a “full web” experience, many mobile devices return a fake higher layout viewport dimensions.
For example, the classic iPhone by default reports a layout viewport width of 980px. This means that if you create a 320px element on the iPhone, it will fill up only about a third of the screen real estate.
However, this mechanism is not so good for pages that are optimized for narrow screens using media queries.
When we are creating responsive websites is very useful to use the viewport meta tag, which lets us control the scaling and layout viewport of many devices (using the real dimensions, not the fake reported).
<meta name="*viewport*" content="*width=device-width*, initial-scale=1, maximum-scale=1" />
Examples of viewport meta tag
Tip: If you are browsing this page with a phone or a tablet, you can
click on the two links below to see the difference.
Without the viewport meta tag With the viewport meta tag