I would like to adjust initial zoom level for mobile devices(or certain resolutions) so that the content doesn't expand beyond the view space.
Is there an easier way than using media queries?
thanks
This will adjust your website to device width and remove user zoom:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
Note: don't use maximum-scale if you still want your users to be able to zoom.
Related
I want to shrink the entire view when resizing the window. In mobile view, the view should be a shrunken version of the desktop view. Something similar to the https://www.cbioportal.org/ website. If we resize, the entire view is being shrunken. In the frontend i'm using Angular and bulma. How could I achieve this?
Don't use the "responsive" meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
This will revert to default behavior of browser which shows the entire viewport width.
Please see my demo video: https://youtu.be/8BQ_UgMGK2E
I'm convinced that rem is great for components, and em for sub-components, but seemingly my height:5rem is corresponding to something other than root font-size:16px
I cannot figure out why device / mobile emulation seems to scale the root font-size, as rem should be consistent at 16px, regardless of how many pixels are on the screen
Meta tag just says charset utf 8
window.devicePixelRatio is a consistent 2
As I mentioned in the comments above, you can resolve this by adding a viewport meta tag to the head element of your document.
For instance:
<meta name="viewport" content="width=device-width, initial-scale=1">
In doing so, this allows you to control the width and scaling of the browser's viewport. If this tag has a content value of width=device-width, the screen's width will match the device independent pixels and will ensure that all the different devices should scale and behave consistently.
For more specific information, here is a related question that I answered. The answer goes into more detail regarding the difference between max-width and max-device-width.
The answer, as mentioned by Josh Crozier is to add
<meta name="viewport" content="width=device-width, initial-scale=1">
in the index.html <head> section
Hello friends to see if someone gives me a hand to tailor my web devices.
I tried to media queries and my phone (I have only one, Motorola Moto G) I managed to adapt, but I have not used the viewport tag. I just have been adapting the CSS through this media query:
Landscape:
#media screen and (max-width: 1000px) and (min-aspect-ratio: 13/9) {
}
Portrait:
#media screen and (max-width: 1000px) and (max-aspect-ratio: 13/9) {
}
On my phone the web is perfect, I managed to adapt both landscape and portrait. But what happens is that I have only this phone and do not know how the page will look in other devices, putting the viewport tag is deformed giant and completely:
<meta name="viewport" content="width=device-width, initial-scale=1">
The problem is that I'm pretty lost with this, because to prove my page this also deformed giant appears:
http://www.responsinator.com/
The question is, resolution is 1280x720 Moto G? Why to place the viewport tag goes so distorted? I do not understand, see if someone can explain. I tried to find information on the Internet but I can not understand it.
Thanks
What I think you're asking is that:
Is the Viewport Tag (the meta tag) absolutely essential because it is messing up your view of your website on your device.
To answer this, lets look at the viewport tag itself:
<meta name="viewport" content="width=device-width, initial-scale=1">
This tells the browser to set the initial scale to 100% of the viewport window, and the width of the body element to that of the device, so it is telling the browser to correlate the width of the webpage body element to the same width as that of the device viewing it.
In short, no the viewport tag is not absolutely essential, but it is an extremely good idea, although you can change the settings on the content part of the tag such as
<meta name="viewport" content="width=500, initial-scale=1">
or
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
You can do no wrong reading up on the Mozilla Developer Network page on the topic which will tell you the possible values you can set in the viewport tag. These are entirely seperate from the CSS display values and are used as a default for how the browser renders the page.
I can not give you more specific advice without you providing a more specific issue in your question
singforpleasure.nicktoye.co.uk on the iPhone/mobile device breaks the layout when you go from portrait to landscape to portrait. When you return to portrait it adds some extra spacing to the right.
Is this a bug?
You must adapt the meta viewport to:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Then it should be fine.
I'm building web application using RWD. I've written media queries for different resolutions say 1024, 768 and 320.
I'm using below metatag to decide page width
<meta name="viewport" content="width=device-width, initial-scale=1" />
There are few devices e.g. iPhone 5 with resolution - 1136×640. When I'm opening my webpage in iPhone its displaying 320 layout in landscape mode where as its resolution says its 1136px wide.
I know it has CSS pixel ratio as 2 but not sure logic between CSS pixel ratio, media query width and device resolution calculation.
Is there are any article or link that explains this and will tell why its displaying 320 layout for iPhone.
Thanks in advanced.
Try using this meta declaration instead:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">