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*/
}`
Related
Consider two screens:
same resolution
same orientation
but different physical sizes
Exempla gratia:
How can i target different screen sizes with CSS media queries?
Because, for example:
for the one 1920px wide display, it is uncomfortable to read the long lines of text that stretch edge-to-edge, and you'd want some padding, margin, or other spacing to narrow the text
but for the other 1920px wide display, you want text to go edge-to-edge
Bonus Chatter
And you can't try to invoke User-Agent strings:
i'm asking about CSS media queries, not User-Agent strings
the 4" screen could be connected to a PC
the 18" screen could be connected to a phone.
And you can't try to weasel out of the question by talking about orientation, or by musing if the screen supports touch or not, nor can you use the handheld attribute
I'm asking about using CSS to style a page based on the (physical) size of the screen.
Bonus Reading
Detect if a browser in a mobile device (iOS/Android phone/tablet) is used (tries to rely on resolution)
Media Queries: How to target desktop, tablet, and mobile? (tries to rely on resolution)
How To Build A Mobile Website
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
Using Media Queries For Responsive Design In 2018
What media query breakpoints should I use? (tries to rely on resolution) ("breakpoints" is another word for "pixels")
Media Query for Large Desktop
CSS media queries for handheld and not small browser screens
Media query about screen size instead of resolution
Well a typical media query for this would use min-width or max-width to hide or show things depending on display size. This is dependent on a <meta> tag which tells the browser to use the physical width of the display as the viewport width rather than using the resolution of the display as the viewport width.
For example:
<meta name="viewport" content="width=device-width"/>
and
#media all and (max-width: 600px)
{
/*Put your mobile styles here*/
}
It's not a perfect solution and doesn't really account for touch interfaces for tablets or other larger mobile displays, but it's a good place to start for building mobile user interfaces.
It's important to emphasize that this is intended for displays in which the content is scaled. I know for fact that most modern mobile devices use scaling (2x/3x on iOS and xhdpi/xxhdpi on Android), but it should also work with Windows scaling, though I'm not 100% sure on that and don't have a way to test it at the moment.
These media queries can accept any CSS unit as well, so you could very well use actual inches if you wish.
#media all and (max-width: 3.5in) { /* ... */ }
When breakpoints are set in CSS for responsive web designs, media queries check the width of a device so that different layouts can be appropriately displayed. As I thought I understood it, the pixel units in the media queries were referencing the rendered pixel resolutions that we commonly see in device specs. For example, the iPhone 5 at 640 x 1136px or the Nexus 5 at 1080 x 1920.
But now I’m confused about whether breakpoints are instead meant to reference a device’s points (for iOS) or density-independent pixels (for Android).
This question largely stems from how I’ve often seen common breakpoints referenced, with buckets defined for phones, tablets, and then desktop screens. This, for instance, is from Bootstrap’s documentation:
// Extra small devices (portrait phones, less than 544px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 544px and up)
#media (min-width: 544px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
But wait a second. The Samsung Galaxy series has a few phones nowadays whose resolutions are 1440 x 2560. With the breakpoints above, these higher-resolution phones would be treated like desktops, wouldn’t they? Even the iPhone 6 Plus would qualify as a desktop. That can’t be right.
And while I know it’s best practice to define breakpoints based on content and not the device, the Bootstrap example is representative of a seemingly widespread idea that there ought to be breakpoints for portrait phones, landscape phones, tablets, and desktops … but a single bucket for all portrait phones doesn’t make sense if we’re talking about rendered pixels, because there’s so much device size diversity in that category alone!
Finally, I also found this kinda related post, which encourages setting the viewport meta tag so that “the screen's width will match the device independent pixels and will ensure that all the different devices should scale and behave consistently.” (Emphasis is mine.) So to return to the Bootstrap example, even though the unit says px, it could actually be referring to pts or dps?
All of this – plus a parallel investigation of mine into the concept of designing in 1x to 4x for different screen densities – has got me completely spun around on what feels like it ought to be a basic issue. Am I making this out to be more complicated than it is? And dps and pts relevant only to native development and not responsive web design? What units exactly are media query breakpoints referencing?
From the very same post you referenced in your question:
Stack Overflow– “Should I use max-device-width or max-width?”
In terms of media queries, you will probably want to use max-width rather than max-device-width, since max-width will target the viewport (current browser window), whereas max-device-width will target the device's actual full screen size/resolution.
So to answer your question, pixel-based media queries– combined with the correct <meta name=viewport> tag settings –will reference rendered (as opposed to actual) pixels.
I'd like to try to work out a method of adaptive webpage design to coexist with both mobile and desktop browsers.
At first it looked like using Media Queries in CSS was what I needed, so I went with that, but it looks like Google Chrome is messing up what I wanted to do.
Compared to most browsers, for the most part only mobile browsers respond to the orientation media query, which seemed to be a good way to target a mobile browser, no matter the screen size. However, for some reason, Google Chrome not only responds to this, but will actually select Landscape and Portrait depending on the dimensions of the viewport (the window itself) and has nothing to do with the position of the screen itself.
This brought me to another potential idea. I noticed that on my mobile devices, device-width and device-height will swap positions depending on landscape and portrait modes, while Google Chrome on a desktop always reports the monitor's proper dimensions, even when Chrome thinks the window size qualifies as Portrait mode.
What I'm hoping to do is figure out a way to make a media query that determines if the device-width is greater than device-height. This should allow me to determine the true orientation of the screen, regardless of viewport size and Chrome's orientation value.
My eventual goal is to be able to design a page with a specifically mobile-friendly layout for any device that reports Orientation: Portrait AND the Device-Width is less than Device-Height, which should only ever happen on a true mobile device in portrait mode (or the rare sideways PC monitor, which I don't mind accidently targetting), while serving a landscape/desktop friendly layout to any device with a screen that is wider than it is tall.
I am adamantly avoiding using any form of Javascript, useragent query, or server-side scripting to accomplish this. Media Queries seem to be the fastest and least costly (processing wise) method to have a page that actively shapes itself to the current device and will also shift its position in real-time as the mobile device rotates between orientations.
My ultimate question for this post is: Can I specify some form of expression in a media query in CSS that will simply compare the Device-Width and Device-Height and display one style when the width is greater than height, and vice versa?
Something like:
#media screen and (device-width > device-height) //true landscape mode
#media screen not (device-width > device-height) //true portrait mode or square screen
After some tweaking and testing, I came up with the following combination of media queries that seem to do what I'm trying to accomplish.
#media only screen and (orientation: landscape) and (min-device-aspect-ratio: 1/1)
//This targets any screen that is in true Landscape orientation, including desktop browsers. This should also target square screens where the browser reports landscape orientation.
#media only screen and (orientation: portrait) and (min-device-aspect-ratio: 1/1)
//This targets strictly desktop browsers that have a window resized into what the browser considers "portrait" mode. This works in Chrome, Firefox, and MS Edge (haven't tested others). More specifically, this targets any browser that reports portrait mode, but where the screen is actually in landscape position. This may also target square screens where the browser reports portrait orientation.
#media only screen and (orientation: portrait) and (max-device-aspect-ratio: 1/1)
//This strictly targets devices that are actually in portrait orientation, mainly mobile devices (although it may target desktops with rotated monitors)
This may also target square screens reported to be in portrait mode, so you may need an additional query that targets exactly square screens.
I'm happy that you got the way to do what you where looking for, but I think readers should take in account a couple of things:
First, as you said, Monitors can also rotate, in fact is very common in offices to see that kind of monitors.
Second, in mobile you can also have a Landscape viewport in Portrait orientation or viceversa, as you can split the screen in two.
Third, devices such as the Pixel 2XL and iPhone X have a proportion of 18:9 and 19.5:9 respectively, which means that half screen will return Landscape.
Finally, what really matters is the viewport orientation because is what determines the content area, whether is a desktop or a mobile screen. If you resize your desktop window you should also thing about doing some responsive to optimise your available space.
As bonus, in iPhone width referes to viewport while device-width refers to the screen width, which, unlike Android, is always the larger side of the screen.
I'd love to have an easy answer to your question, but there is not. Doing responsive is not easy. Maybe this article (EN) can help you. It gives some clues to split between Desktop vs Laptop, Laptop vs Tablet and Tablet vs Mobile.
When it comes to using media queries, I see max-width and max-device-width used a lot to target "small screen" devices, or smartphones, but why not use the media query for resolution?
For example, #media screen and (min-resolution: 230dpi) allows me to write CSS to target some smartphones, such as the Galaxy S Glide SGH I927R, which has 480 x 800 pixels, 4 inches (~233 ppi pixel density)
Conversely, I would have to use #media screen and (max-device-width: 480px) and (orientation: portrait) plus #media screen and (max-device-width: 800px) and (orientation: landscape).
It seems that min-resolution would save me some time. I have read several articles and blogs, but I do not see anyone advocating for resolution.
There must be an obvious point that I am missing - I am not a professional web designer - but what is "wrong" with the approach of using resolution? What makes width or device-width better to target "small screens."
My favorite site so far on width vs device-width has been:
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml
Maybe the reason that I had to use a max-device-width of 800px, which seemed "excessive" for smartphones to me is because I did not use the meta tag viewport. I read in the article above on page 3 the following:
"It means that our CSS media queries will match the dimensions of the "zoomed out" device's, and not its actual (ie: 980px for device-width on the iPhone instead of 320px). So whenever you're optimizing a webpage for mobile devices, the first step is to define a particular META tag on your page to alter/ disable the "zoom in" behaviour of mobile browsers..."
Perhaps after defining the viewport, the max-device-width would make more sense than using Resolution in the media queries?
Chris Coyier with CSS-Tricks.com and Jamie Bicknell of Rentedsmile Web Design put together a great article on the CSS-Tricks website.
I will summarize their main points and post a link to the article at the bottom.
The most popular analytics software in the world is Google Analytics which is why most of us are so concerned about resolution. Unfortunately this does not account for browser window size which is the only item to account for when many of us are using 27" screens, multiple screens, 40+ devices, and frankly, what percentage of people ever use the full window? I know I don't.
Chris Coyier points out only ~61% of users view within 200px of full screen meaning if you are 'pixel-perfect' then in the eyes of your consumer -- you are not. Your website will most likely be broken. (An estimated 0.85% using full screen)
This means screen resolution is totally irrelevant to the cause which are our end-users.
See the full article here for their complete breakdown and illustration-rich analysis
http://css-tricks.com/screen-resolution-notequalto-browser-window/
I've been using min-width: 600px as my breakpoint in my CSS media queries. My rationale was that at 600px and above I'd capture tablet devices (Kindle Fire, iPad, etc) and below 600px would capture all of phone devices.
It turns out that while the iPhone plays nice by doubling its pixels, but still reporting being 320px x 480px, there are a ton of Android phones out there with resolutions like 700px x 1280px. The trouble is, how do I capture these devices without giving them a tablet-like interface?
Normally I'd just let the content respond to the pixel resolution of the device, however, a 1280px layout on a 4.3in screen just doesn't look right, especially since my application deals with a lot of form elements, which on a phone you want to span the entire width, but on a tablet or desktop you do not.
One good option is to tailor your media queries to your content, not arbitrary device pixel sizes, by using ems.
Please use responsive css framework to avoid this kind of problem. I would suggest using Foundation or Twitter Bootstrap