Is it possable to exempt an img or div from the viewport meta so that only one image would be able to be zoomed in on similar to a normal jquery image zoom but just using the pinch in / pinch out
Related
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?
I have a non responsive web page that has centered content 700px width 700px height. I'm having trouble getting mobile devices to display the content (I'm testing with Chrome on Android, but I'm guessing the same issue occurs with other devices as well). I've tried various things with viewport meta and css media screen, but Chrome keeps zooming in on some portion of the page instead of displaying all of the content. This is surprising to me, because when I visit websites which are clearly not optimized for mobile devices, my usual experience is that I see the entire page "zoomed out" and I can then zoom in. I was expecting my page to also work like this, and no matter what I do, I can't get my page to work like that.
Additionally: bonus points if you know a way to "auto-zoom" so that the centered content is fully displayed without displaying empty space. Like a viewport meta tag that defines both minimum-width and minimum-height simultaneously.
Did you set <meta name="viewport" content="width=device-width, initial-scale=1">?
More info on the viewport meta tag
I am working on a website right know, but I have a weird issue with the view on mobile devices.
When I resize the window on a desktop browser the elements and fonts are changing with the viewport how they should.
When I open the website on a mobile device all fonts and elements (e.g. the burger menu) are way to small. It looks like it is a scaling issue or something similar.
I have the meta viewport tag in the head so that is not the issue.
I couldn't find any similar questions here or on any other forum. I hope somebody can help.
I have attached some screenshots, but if necessary I can provide the URL.
Thank you in advance.
Full Screen Window
Resized Window
Responsive example 1
Resposive example 2
Make sure to include responsive meta tag to insure that your browser gets the right width of your device instead of zooming out the page
<meta name="viewport" content="width=device-width, initial-scale=1">
This means that the browser will (probably) render the width of the
page at the width of its own screen. So if that screen is 320px wide,
the browser window will be 320px wide, rather than way zoomed out and
showing 960px (or whatever that device does by default, in lieu of a
responsive meta tag).
Further reading Here
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 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