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;
}
}
Related
I am working on a responsive website and the elements on the website are larger than I anticipate. I would like to zoom out or scale back the website such that if the website is loaded in a device of certain width, it would show the scaled down version. I know it can be done using the media queries but I would like to do something less painful and just scale the website down to 0.8. Similar to zooming out to 80% in chrome browser.
You could do:
#media (max-width: 800px) {
body: {
zoom: .8;
}
}
Scenerio : I have to develop a responsive website in Angular JS in which some componets are sized with CSS media query while others with Javascript/Angular.
The problem of difference between Screen and Browser Resolution Starts with devices having width 1600 and above. Actually some browser are having resolution less than the screen resolution while others are exactly same as screen resolution
I am on a Win 10 computer with 14inch Screen and having supported screen resolutions upto 2560x1440
I tried to find out the browser width for some standard resolutions and found the following result:
for Screens 1366x768 Browser Viewport Width : 1366px
for Screens with 1600x900 Browser Viewport Width : 1583px
for Screen with 1920x1080 Browser Viewport Width: 1519.2px
for Screen with 2560x1440 browswer Viewport width 1433px
Now the problem is that css and js both apply the element sizes according to Screen Size and not the browser size, which browser is unable to display properly because it has lower resolution than screen.
Please note : the problem of low resolution on browser is specific to some devices and not all having resolution and all. And this is same for all browser on that device. i.e chrome, mozilla, ie etc.
Edit :
And also i don't want to use Bootstrap and possibly Jquery. If possible please suggest an Angular JS /HTML/CSS approach.
I have a website that has a lot of components which are animated using JavaScript. The website is mainly targeted at users on a desktop. All of the coordinates for the animations, and all of the sizes for the images, depend on the viewport having a width of exactly 1920px (although it could be any height greater than 1000px and it would work). If the viewport is any other width, the images and the animations look like nonsense due to the change in coordinates.
Is there any way I can scale the viewport such that even if it isn't 1920px wide, all of my coordinates and sizes will still be treated as if it is?
I have tried setting <meta name="viewport" content="width=1920">, using the CSS zoom property, setting min-width: 1920px on the body element, and setting the browser zoom using JavaScript, all to no avail.
Have you tried using "vw" to set the width of your elements?
http://www.w3schools.com/cssref/css_units.asp
"vw" is a length unit of 1/100th of the viewport width.
Try using it like this on your css file:
.yourelement {
width: 30vw;
}
Why don't you set your html/body to have a hard width of 1920px in your stylesheet?
html, body {
width: 1920px;
}
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.
How to set screen resolution for all screens like desktop, laptop, etc,. in parallax movement.
I am currently working on a parallax website. I have a problem to set the screen resolution for all screens. I want to put several images in the background. The width of every image is 5212px.
You want to set the width of the images as a percentage rather than a width. If you set the width to 100% rather than 5212px for example then no matter how much you zoom in or out and resize the window the image will always be 100% of the window size.