I am currently making a responsive design using CSS #media query, which works fine on "old" phones with a pixel ratio of 1:1.
But high-resolution (retina) displays are using ratios other than 1:1 for displaying the website, so the website looks small.
How do I set the pixel ratio it should use?
I tried to google it but I found only ways how to set an extra style for those displays.
The viewport meta tag can be used to fix the browser's viewport width to match the device's width. This overcomes the common problem of websites show up really small on high-resolution screens, like Apple's retina displays.
<meta name="viewport" content="width=device-width">
Related
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.
I'm trying to understand a few things that deal with pixels.
The first of which is what changes between developing an html email and a website in terms of appearing on a mobile screen. To be more specific, when developing a website, I can have media queries that run below 375px (i.e. #medie screen and (max-width 375px)) and the changes occurring in that code will not be reflected on desktop (since most browsers without going into inspect restrict their width at 400px); however, on a phone that has a smaller screen like my iPhone SE, the changes that occur under this media query DO get hit.
So that on its own makes sense to me, because my phone screen is smaller than my min browser width, of course the changes I apply in that block will hit when the website is executed on my phone. But now is where some confusion gets introduced. When developing an HTML email, I have a table set to 600px wide. There is no media query affecting this HTML. The table is 600px wide under all circumstances, so when displaying on my less than 600px wide phone, I would assume that some of the page would clipped, but this is not so. When viewing the email in something like GMAIL, the entire composition is visible. This made me scratch my head for a bit, so I researched and found some sources claiming that this phone is actually greater than 600px wide. So my thought is that the screen density is just greater than that of my laptop, or maybe its some magic that GMAIL is applying, but either way, the email shows up just as it would on my laptop in a browser width greater than 600px.
I'm using these meta tags
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
and I have a base understanding of what they do, but how do these contribute to mobile exactly?
In summary, my main questions are as follows:
why is it that my media queries with websites that run max-width: 375px hit my phone, and yet a table which is always 600px wide is fully viewable a the same time?
is this a matter of screen pixel density, or is it a little more complex?
what roles do these meta tags play exactly?
Any insight you can provide would be much appreciated. Thank you.
why is it that my media queries with websites that run max-width: 375px hit my phone, and yet a table which is always 600px wide is
fully viewable a the same time?
Because your phone visual port actually has a width of 1136 pixels and a height of 640 pixels.
is this a matter of screen pixel density, or is it a little more complex?
Its a matter of screen pixel density, the default pixel ratio depends on the display density:
Default ratio when the viewport scale equals 1
Display density < 200dpi Ratio = 1.0
Display density > 200dpi && Display density < 300dpi Ratio = 1.5
Display density > 300dpi Ratio = integer floor(density/150dpi)
for the iPhone SE its 326 ppi (pixel per inch).
what roles do these meta tags play exactly?
The tag its not part of any web standard and it was introduced by Mobile Safari, the width property controls the with size of the viewport, device-width its a special value, this is a typical use of the tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
which sets the width to the width of the device viewport, and a zoom of 1, the width its in CSS pixels it doesnt take into account pixel density at all. Changing the value of the meta tag with JavaScript works, the website will react to the new value.
Try setting the width to 375px to see what happens in your phone.
Check this 2 articles:
pixel its not a pixel
2 viewports
I'm making a responsive site with three states (full, 480px and 320px).
Scaling to device-width look good on smartphones and devices with screen smaller than 700px, which is where the first responsive mode kicks in.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
However, on the iPad i want the width to be 1200px so the page initially shows zoomed out in it's "full glory".
Is there any way to make this by client side code? I know i could fetch user agent on server side but since i am not making the back end code, i'd prefer a html/js solution.
Of course, a responsive state for iPad's would be ideal, but there's not time or money for that and the desktop site works good enough.
Don't know if it will be the solution for anyone else coming here, but what solved this to me was setting min-width to each responsive states <body>.. made the site load decent enough on the ipad..
This question already has answers here:
Android viewport setting "user-scalable=no" breaks width / zoom level of viewport
(3 answers)
Closed 8 years ago.
I'm having some problems getting my website to scale correctly for mobile devices.
We have a site that's designed to be a minimum width of 640px, maximum of whatever. I have the meta tag currently:
<meta name="viewport" content="width=device-width;minimum-scale=0.5,maximum-scale=1.0; user-scalable=1;" />
Now - The part i'm confused about is that if I use "initial-scale=1.0", obviously the site will scale 1:1, and it will look crappy on an iphone 3Gs (will only see half the site). Now, on an Iphone 4, (having a 640px wide resolution) it will be scaled properly at 640px if I use "initial-scale=1.0".
Alternately, if the graphics are 480px, 3Gs would require scale=.667 and iOS 4 would require 1.3, correct?
So how do you get the site to fit perfectly edge to edge? Can the browser detect the device width and then set the scale accordingly?? There are lots of different device widths out there... android, older iphones, blackberry's etc.
Getting quite frusterated :( Feel like i'm missing something important that I should already know.
Edit It seems that the 'initial-scale' meta tag should be scaling the site relative to the viewport, then using width=device-width to set the actual viewport size.
The problem I seem to be having is that the viewport isn't scaling to fit the device, it's staying at 640px no matter what tag I use. What am I missing here???
I think the main issue with the original message is that semi-colons don't appear to work on iPhone 4+. It only works with commas as separators (or only the device-width setting). Other browsers seem to be more tolerant.
The following works reliably for me:
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1" />
You'll also want to disable the body and document from scrolling horizontally:
body, html
{
overflow-x: hidden;
}
Good link for more info on Mozilla Site:
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
"width" is to tell the browser how wide your website is at 100% zoom. if you have designed your website to be fluid, you could specify "device-width" here, and the browser won't need to use any zooming, as your layout is designed to fit any viewport width.
"initial-scale" is for overriding the default behaviour of some devices to zoom in or out on your website so that the website width (which you specified above) matches the screen width. setting this to 1 basically says "don't zoom for this, use scroll bars if my website is too wide for the screen, and leave blank space at the sides if it's too narrow". if you do want your website to fill the screen width exactly, don't use initial-scale.
Ok, i've figured it out... essentially.
Because my design is actually 2x the size of the viewport (sort of), the key is just to use "initial scale = 0.5". It works correctly on both devices (3Gs and 4), and more or less correctly on android devices, etc.
Kind of tricky, and it seems like there should be a better way to do this, but for the time being, it works.
Thanks all who provided input.
I believe that the answer is that you want to tell the web browser to always scale the site to 640 pixels. I would even turn off the ability for users to scale the site so that stray drags don't re-size everything.
Try this:
<meta name="viewport" content="width=640; user-scalable=no;" />