What I want to is set <body> to be 100% width and height (or viewport width / height), but when the user zooms, either via pinching on mobile or numerous methods on a desktop browser, I want the viewport to scale with the zoom. So where as body used to be the size of the viewport, if you zoom in 2x, I want the viewport to be 2x bigger.
One possible solution would be to measure the viewport in javascript on load and then set body to be those dimensions, then it would scale the way I desire. I could then put more hooks into viewport resizing to get it to appear the correct size, but it'd be nicer if there was a css / html solution, even if it doesn't necessarily work on all browsers.
Related
I have a web page that renders a drop down. By design, I want to disable the drop down in Mobile. I have used view port size as the criteria to determine whether the current device is Mobile or not. Whenever I am zooming in to 200 percent or higher, the viewport size is reducing and it is inferred as mobile device. Hence, the drop down does not render. I do not want to use navigator.userAgent for this purpose. Any other workaround for this?
Whenever I am zooming in to 200 percent or higher, the viewport size is reducing and it is inferred as mobile device.
What you're describing is the difference between device pixels and CSS pixels while zoomed. As the browser zoom increases, so does the ratio of CSS to device pixels. This is how most browsers are designed to work, and it's what visitors generally expect.
So, if your page width is 1,000px:
at 125% zoom, your CSS pixels will be 800px (1,000 / 1.25)
at 150% zoom, your CSS pixels will be 667px (1,000 / 1.5)
at 200% zoom, your CSS pixels will be 500px (1,000 / 2)
If you want to zoom the page WITHOUT affecting CSS pixels, you could potentially do something custom using the CSS transform property.
body {
transform: scale(2);
transform-origin: 0 0;
}
The problem that I foresee with this approach is that it will necessarily require side-scrolling.
WCAG 2.1 SC 1.4.10 requires that:
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for vertical scrolling content at a width equivalent to 320 CSS pixels
https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
You can use the media query max-device-width which gets the actual device rendering screen size rather than than the viewport size.
For example:
.nav-menu {
#media only screen and (max-device-width: 768px) {
display: none;
}
}
I am developing a responsive website.
For this website the padding and width of the elements are in proportion of the width and/or height of the web page.
So I have preferred to use the viewport related units (vh, vw).
Everything scaling absolutely fine till the time I got a new requirement...
Now I have to put the max width and height to my webpage. max width of 1366px and max height of 768px.
So I have added max-height and max-width css styles to my html tag.
Web content is now restricted in this range, but still the padding and width is getting calculated considering the whole width and height of the page as viewport.
For eg. if screen width is 1500px then 10vw is calculated as 150px. But what I need is it should not exceed 136.6px as max width is 1366px.
So is there any way to restrict the width and height of the viewport?
Like
<meta name="viewport" content="width=device-width, max-width=1366, max-height=768, initial-scale=1">
If you are required to have fixed sizes for your viewport, there is no point in using viewport-relative measures like vh, in some cases you'll manage to do the trick with percentages, but I wouldn't recomment it.
The best way to do this is to edit the viewport with javascript, there are a couple ways of getting the widths and heights of screens in JS
Again, as #hungerstar mentionned in a comment, it is not recommended to have fixed viewport sizes, so make sure you really have this requirement before you jump into it.
Hope it helps
I noticed that the <canvas> element can have different scales. For instance, if I set the CSS width and height to 100px, but have the javascript set the element's width and height to 200px, the element is sized down so everything printed on it is 1/2 the size. (Or 2x the resolution)
I have a retina screen Macbookpro, so in development, I set the scaling to 2x so the images and objects look clear and crisp on my screen.
I have heard that other screens can have a 1.2x resolution (CSS pixels vs Actual pixels)
Is there a way to find out what the resolution/scaling is of the device's screen so I can make my canvas as crisp and as clean as possible to the user?
If it helps at all, I'm trying to make a game in javascript using canvas as my graphics output.
These properties will give your dimensions:
window.screen.availHeight
window.screen.availWidth
For pixel depth, use this property:
window.devicePixelRatio
For application in canvas, a helpful script and explanation is given here.
After searching around using different terms, I was able to find the answer that I was looking for.
The window object has a variable called window.devicePixelRatio. This lets us know the ratio of pixels to the device's screen pixels. On my retina screen, this variable gives me a 2. With this, I can set the canvas to the correct scaling so it looks clean and crisp on any screen.
Source: http://www.html5rocks.com/en/tutorials/canvas/hidpi/
I've just read a nice article on viewport which left me with a couple questions regarding Visual viewport vs Layout viewport on mobile devices.
the width and the height of the layout viewport are equal to whatever
can be shown on the screen in the maximally zoomed-out mode
I did not quite understand what that means. When they say "maximally zoomed-out mode", does that mean that the layout viewport is different for different HTMLs (and not specific to different devices like iPad, Xoom, etc)?
Secondly, I've created a demo page to measure these two viewports. (Please view this on an iPhone/iPad to get the correct values.)
I understand that the layout viewport can be changed by setting the meta viewport tag, but that also changes the visual viewport--why is that? It says that the visual viewport is the part of the page that’s currently shown on-screen, so my understanding was that the visual viewport should not be affected by the meta viewport setting.
Both the layout viewport and visual viewport are measured in CSS pixels. This is an important distinction to make. As opposed to the physical pixels on the device, CSS pixels are used to keep dimensions of the content relatively constant and controlled, and the device then translates CSS pixels into device pixels.
Understanding the difference between CSS pixels and device pixels may assist in the understanding and answering of your questions.
The layout viewport's dimensions are effectively the initial dimensions of the content (in CSS pixels).
The layout viewport is used to best determine how to position and render the content initially. It is independent of the device's zoom level. By saying "...whatever can be shown on the screen in the maximally zoomed-out mode", I think he's alluding to the point that the layout viewport's dimensions are unchanging; it will always be the same size, irrespective of the current visual viewport.
The visual viewport is just the viewable area of the page -- again, in CSS pixels. If you zoom in on a page, you're increasing the size of the CSS pixels, which naturally reduces the number of CSS pixels that can fit on the device. That's why the visual viewport's dimensions shrink when you zoom.
The visual viewport cannot be any larger than the content on the page.
The content's dimensions are largely dictated by the layout viewport.
The layout viewport's dimensions are set by the meta-viewport rule.
Therefore, the visual viewport's dimensions should change in reaction to changes in the meta-viewport rule.
You have since asked (in comments):
Why is it that when there's content that's explicitly wider than the layout viewport, the visual viewport is stretching to fit all of that in? Shouldn't there be a scrollbar?
No, because you're only indicating to the browser what the initial dimensions of the layout viewport should be, not the visual viewport.
If you want the visual viewport's dimensions to not adjust to the full width of the content on page load, set the initial-scale=1 property inside the meta-viewport declaration.
There's a fantastic read over on the Mozilla Dev Centre about the viewport meta tag: https://developer.mozilla.org/en/mobile/viewport_meta_tag
I have a website, its uses the 960 grid system, everything is fine.
Except the header, the header is too tall!
Is it possible to reduce the entire website size when the user's screen is less than or equal to 1024x768 ?
(same way you can press CTRL+ and CTRL- in IE?)
IE does support the non-standard zoom style, which you could apply to the <body> if you detect the window size is too small.
Technically this is possible, but I would advise against using such non-conventional approaches. I would just use a short header that will look good both in <= 768 and > 768.
After the document is loaded, you could check (using JavaScript) the client height of the body and apply a style to your <body> element (or just the header) to set the font size to a certain percentage. All your other dimensions would have to defined in em or percentage units so that the base size at the main container propagates to child elements.