google says "because css pixel ratio" but I can't figure out what that is, or why it exists.
Why am I adding metadata that tells the browser to render the screen at <2/3rd the screen's resolution? Images (as far as I can tell) don't get resized, so why is everything else? and why this so common?? wts is going on??
You need to understand why you are adding certain codes into your file. You said you have <meta name="viewport" content="initial-scale=1"> in your code. What initial-scale means is, upon page load, the page will be viewed at 100% zoom level. It's not about filling 1 CSS pixel to 1 hardware pixel. It's about filling 1 CSS pixel to 1 device-independent pixel.
As defined in Google's developer reference:
Device-independent pixel (dip): A scaling of device pixels to match a uniform reference pixel at a normal viewing distance, which should be approximately the same size on all devices. An iPhone 5 is 320 dips wide.
Hardware pixel: A physical pixel on the display. For example, an iPhone 5 has a screen with 640 horizontal hardware pixels.
Are the hardware pixels on your phone different from those on your PC monitor? Yes, they are different in terms of size (pixel density). Assuming your 21" monitor and 5" phone screens both have 1920px x 1080px screens, so obviously the pixel density is much higher on the phone's screen (and much smaller pixels) and it would not be wise to show up the webpage using the ratio of 1 CSS pixel to 1 hardware pixel since everything will be too small on the phone screen.
So what if you don't want responsive website design, but to fit the whole page into the small screen like what you see on a PC monitor? All you need to do is to remove the <meta name="viewport" content="width=device-width, initial-scale=1"> line and browsers will automatically fit the page onto the screen by default, by zooming out (i.e. initial scale will not be 1). Developers only add this line of code if the website needs to be responsive, and has the relevant CSS media queries for that.
While Billy's post did answer the question, and it does a good job of describing the general mechanism, the question did rise how to set the webpage to full screen in browsers that don't zoom out all the way by default. That is, use every pixel on a 1920×1080 screen as if it was a 1920×1080 desktop monitor.
Well, unfortunately there is no failsafe way to do that, but you can get close if you include some device specific #media queries.
html, body {margin:0; width:1920px; height:1080px; font-size:16px;}
#media (-webkit-min-device-pixel-ratio:1.5) { body {zoom:.66666667} }
#media (min-device-pixel-ratio:1.5) { body {zoom:.66666667} }
#media (min-resolution:1.5dppx) { body {zoom:.66666667} }
#media (-webkit-min-device-pixel-ratio:2) { body {zoom:.5} }
#media (min-device-pixel-ratio:2) { body {zoom:.5} }
#media (min-resolution:2dppx) { body {zoom:.5} }
#media (-webkit-min-device-pixel-ratio:3) { body {zoom:.33333333} }
#media (min-device-pixel-ratio:3) { body {zoom:.33333333} }
#media (min-resolution:3dppx) { body {zoom:.33333333} }
#media (-webkit-min-device-pixel-ratio:4) { body {zoom:.25} }
#media (min-device-pixel-ratio:4) { body {zoom:.25} }
#media (min-resolution:4dppx) { body {zoom:.25} }
This will (attempt to) zoom the scale of the page so that the number of CSS pixels is the same as the number of hardware pixels.
Of course if you take this approach, note that you will have to add new media queries with higher resolutions as time progresses.
And it will fail on devices that are not 1920×1080 pixels.
A better approach would be to not contemplate the hardware resolution at all, but just work with what you have. Don't use pixels, use percentages or vw and vh for measurements. 50vw, not 960px, is the horizontal centre of the screen. That way, your webpage wil display correctly on any device, no matter its characteristics. No scrolling or pinching needed!
You may find you have to differentiate between landscape and portrait modes with #media queries, but that depends on the contents of the page.
Related
I am currently attempting to get a website to display some plain text with appropriate font sizes on both a desktop and mobile browser. Trying to choose a font size for both results in the text being too large on desktops and too small on mobile because of the different displays.
I have attempted using a media query to change the font size based off of the screen width.
#media screen and (max-width: 900px) {
body {
font-size: 2em;
}
}
This "works", but it comes with the caveat that resizing a browser window on a desktop will result in changing the font size if the width goes to or below 900px. I never want the font size to respond dynamically to the browser size. It should always stay the same size regardless of any window resizing that occurs. I will not consider vh and vw as solutions because of this requirement.
While searching around for solutions, I came across using dpi in media queries as an alternative. Since I assume the vast majority of mobile devices have a higher dpi than most desktop monitors, that could be a good way to change the font size on mobile.
#media screen and (min-resolution: 150dpi) {
body {
font-size: 2em;
}
}
But what if there is a monitor that does surpass this dpi? This works for the 3 devices I am testing with, but I cannot be sure that it will work in more cases.
Overall, my aim is to get something like the setup Wikipedia has. https://en.wikipedia.org/wiki/Dots_per_inch The font size does not change when resizing the browser, it displays at a readable size consistently on both mobile and desktop browsers, and I assume it will work quite nicely on a high dpi monitor as well, but I have no way of testing that.
So what is the appropriate way to get the functionality I am looking for?
After writing this question but before posting, I kept on searching for a solution and I found it. It's actually very simple, but easy to miss. I hope posting this helps others in the future. It all boils down to this line within the head of the html.
<meta name="viewport" content="width=device-width, initial-scale=1"/>
It's explained nicely here.
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Average font-size for resizing screen you can get by using stylesheet calculator and properties like:
vh - viewport height
vw - viewport width.
Your font size will take same size on your view, but it can be unreadable if you don't handle small sizes layout.
For regular size: font-size: calc(.5vh + .8vw);
For large size: font-size: calc(5vh + 5vw);
I have a mobile site which tests on any modern device. My viewport meta tag is:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
The question:
Can I relay on viewport value (especially on width=device-width) and write media queries with out device-pixel-ratio values.
Code example:
I have a block which has different layout while screen width is smaller 400px.
Can I use with such viewport media query like this(1):
#media all and (max-width: 399px) {
/* some css code */
}
Or like this(2):
#media all and (max-device-width: 399px) {
/* some css code */
}
Or I must combine 1 or 2 with large part of device-pixel-ratio values(3) for every media query:
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 399px),
only screen and ( min--moz-device-pixel-ratio: 2) and (max-width: 399px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (max-width: 399px),
only screen and ( min-device-pixel-ratio: 2) and (max-width: 399px),
only screen and ( min-resolution: 192dpi) and (max-width: 399px),
only screen and ( min-resolution: 2dppx) and (max-width: 399px) {
/*some css code*/
}
And the second question:
In my mind string width=device-width must prevent the difference between css pixels and device pixels. Is last statement wrong?
Short answers:
You can just use the max-width or max-device-width queries alone. You've taken care of the rest with the meta tag.
Your second question not quite right: it doesn't really relate to device pixels. width=device-width just tells the device to use its default virtual pixel (CSS pixel) measurement.
Another note: the last example with the complex media query would only target high-resolution devices, which is probably not what you want in this example.
Explanation:
I'm going to refer to CSS pixels as virtual pixels, but I think we're talking about the same thing.
Virtual pixel measurement is the number the browser says is its pixel width. It relates directly to CSS pixels, but can be different from device pixels. For example, if I have an older iPhone with standard-resolution display, its virtual pixel width is 320. (This takes up 320 CSS pixels.) The display also has 320 actual pixels in its width, or 320 device pixels, so the device-pixel-ratio (the ratio of virtual pixels to device pixels) is 1.
If I upgrade to a newer iPhone with a high-resolution display, it still registers 320 virtual pixels, but it now has a device-pixel-ratio of 2, or 640 actual pixels in its width. That's why everything looks so clear--there are more pixels in the same space.
If I view a site on either one of those devices, the width looks the same because they have the same virtual pixel measurement. To my CSS, they're both 320 pixels wide. This is pretty straightforward, until some mobile browsers allow us to pinch and zoom to resize a web page. This resizing changes the virtual pixel width.
Some mobile browsers actually do this resizing automatically. So if I were to visit a site on my phone's browser that had a fixed 1000px width, my phone's browser might try to fit the full width of the site in the viewable window, which would make my virtual pixels come out to 1000 instead of 320. I'd be viewing a very, very small version of the site. This is a problem for responsive sites, because if my phone says it's got 1000 virtual pixels, it activates my 1000px media query rather than the correct 320px query.
width=device-width and initial-scale=1 disable this automatic resizing, so you know that if the browser's native virtual width is 320, that's what you'll get on initial load.
minimum-scale=1, maximum-scale=1, user-scalable=no disable the user's ability to pinch and zoom by hand. This can be annoying to some users, but it gives you a little more control of the final viewing experience.
device-pixel-ratio is used to measure the resolution of the device. It's often used to serve high-resolution images to high-resolution devices, since normal resolution images can look blurry on a high-resolution device. Usually people test to see whether the device-pixel-ratio is at or above 1.5 or 2 to determine a high-resolution device.
I created a website without using mobile theme.
If i open my website in my smart phone browser, it resizing my theme.
I mean, It automatically reduce the size to my mobile browser.
For example...I already mention my text box size in my CSS code. The mobile screen pixel size is differ from desktop machine screen pixel size.
My Question is, how it reduce the screen resolution to mobile view?
please clear my doubt.
Thanks in advance.
Do you mean to resize your sites content for the handheld device? If you have a fluid layout (with % instead of pixels for widths) use:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Further reading: http://developer.android.com/guide/webapps/targeting.html
Either there might be some media queries defined within your stylesheet like
#media handheld, only screen and (max-width: 1024px)
{
//Style goes here
}
Which is a style defined for screens having maximum width of 1024px.
Another possibility is, styles may be defined fully in percentage. So that the styles are changed according to the window size.
Again there might be some scripts used in your code to resize. All depends on the code that you are using. There are variety of methods which fits the view according to the screen size.
if you want scale it in browser tell it in css.And use all width in % values
eg:
#media handheld, only screen and (max-width: 767px) {
//mobile version css
}
I am trying to get to grips with media queries for different devices. I have tried my new Sony Xperia Z mobile and displays in full scale site format due to the high resolution. How do I add a media query to re-size a grid and format like a standard mobiles scale? On the Xperia the font is also too small to read and needs to show bigger. Is this a problem for retina devices that act like full size monitor displays?
Xperia Z - resolution 1920 × 1080, PPI 443
How do I include media queries for such devices?
This code targets all devices with the same pixel ratio, which is actually what you need.
#media screen and (-webkit-device-pixel-ratio:3) {
body {font-size: 250%}
}
Here is a list of devices and their device-pixel-ratio:
https://www.google.com/fusiontables/DataSource?docid=1N_eJYR_topuk3xmrOeNhYEsST_LAJikGKKzOQ2o
Yes, it would be a problem for "retina devices that act like full size monitor displays." They would be violating CSS. But since -webkit-device-pixel-ratio works for you, it sounds like this is caused by something else.
You probably omitted this:
The viewport meta tag is used in modern "mobile" browsers. (iOS/Safari, Android/Chrome, Mobile Firefox, Opera). It lets developers say "this is a properly-designed website, not desktop-specific crud". Without it, the mobile browsers assume your website is designed with an unspecified min-width, somewhere around 960 pixels.
When I say "pixel", I mean "CSS pixel". We've established that your CSS pixels are 3 physical "device pixels" on a side. And this means the largest dimension on your device works out at 640 CSS pixels. This is much less 960, so "desktop" webpages - which are assumed in the absence of a viewport meta tag - will start off zoomed out.
`#media only screen and (max-device-width: 1920px) {
/* define mobile specific styles come here */
}
#media only screen and (max-device-width: 640px) {
/* define mobile specific styles come here FOR I PHONE RETENA DISPLAY*/
}`
In my mobile app I use kind of big fonts for example:
<b style="font-size:100px; font-family:Segoe UI">text</b>
When I test it on my phone it looks great but on a smaller phone it's still the same size and it is too big.
What css settings should I use to get the same size on every phone?
Media queries won't work. Yes you can have varying font size based on the screen size(which is pixel size and not physical size, therefore it would not be the same size on two devices with same physical size screens but with different pixel density). Your goal is to have text that is at the same physical size across all devices that have same physical screen size regardless of pixel density.
Nowadays mobile phones are fitting Ultra HD resolutions in palm size screens whereas older phones had much lower pixel density.
There was no solution to this problem until recently. Recently CSS3 added support for what they call 'Viewport Sized Typography'. It allows you to set the sizes of things relative to physical screen size. It is explained here.
Having text with same/similar sizes is desirable across devices and you don't get that by default. It is not because of smaller devices have less or smaller physical pixels, but is due to scaling that happen on those devices in order not to break pages that are mostly designed for larger desktop screens.
For example, iPhone 5 has 1136x640 physical pixels, but using chrome's developer tools' device toolbar you may see that some elements appear to be much larger than that (say 1300x900). That is because of the zoom out scaling that browsers apply by default. In this case, CSS pixel size would become much smaller than actual pixel size. Imagine seeing a desktop size page in a smart phone, just much smaller.
If you don't want that happen, you need to tell the browser explicitly not to mess with scaling (in your pages header):
<meta name="viewport" content="width=device-width, initial-scale=1">
If you see text equally big across devices, you may have something like that and need to just remove it to see it smaller on smartphones.
You should be using Media Queries for different device widths.
#media only screen and (max-width: 768px) {
b {
font-size: 20px;
}
}
#media only screen and (max-width: 320px) {
b {
font-size: 10px;
}
}
And so on...
I have started using REM and EM to achieve this.
I don't know whether a phone browser's default font size changes based on screen size or specific to device. So what I do is I set the HTML to a font size relative to an average of the height and the width of the device using vw and vh like so
HTML{font-size: calc((1vh+1vw)/2)}
By using REM and EM from here you get a more consistent layout and font size across the board.
This works well for mobile devices as they all tend to be the same sort of aspect ratio. I would recommend changing how you implement this for tablets and desktops as their screen ratios tend to be quite different. Of course, use media queries to have separate styles for these.
I would like to say that I just started using this method so would love to hear reasons why I totally should not be using it!
Use #media Queries and set different fonts for different resolutions
Example
#media all and (max-width: 1200px) and (min-width: 800px) {
/* Change Resolutions Here */
b {
font-size: 12px;
}
}
Good Read On Media Queries
Alternatively, you can have a look at https://github.com/modularscale/modularscale-sass
It can quickly get very complicated to set a lot of breakpoints to cater for every single mobile device and I've obtained very good results with modular-scale.
Also, setting the font-sizes in EMs or REMs is the way to go if you want to be fully accessible/flexible.
The answers are all correct but I find the combination of viewport size related but limited to between two values ideal by using clamp() For example:
font-size: 1rem;
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
This will smoothly size the text but not under 1rem (typical 16px) or over 1.25rem (typical 20px). It can be used on the size of icons or font-awesome chars or svg vectors. I use one of the many online clamp calculators to spare me the maths. For instance this one.