Is there a simple way to target landscape mobile devices without affecting desktop ones, without entering the screen size for every device?
If not, is there a single best resolution to target most of the users?
Nowadays mobile screens can have a resolution equal or grater than most desktop screens, I can't see why many use rules for resolutions below 640x480.
For example, to target portrait devices (99% are mobile), one could write his rules in
/*Global and desktop rules*/
#media only screen and (orientation: portrait) {
/*Mobile overwrites*/
}
However, the same query for orientation: landscape would affect desktop users as well.
My temporary workaround is to use vw, vh and vmin, but I would like to know if there's a better way.
Would a mobile CSS media simplify web developers' job?
You can mix CSS Media Queries for orientation to detect landscape mode and hover + pointer to detect a touch device.
#media (orientation: landscape) and (hover: none) and (pointer: coarse) {
/* your CSS to target only landscape mobile users */
}
For a reference to detect a touch device with only CSS here's a good article on medium.
The best solution is to use JavaScript to detect the device and add a class to the <body> or the <html> in order to add your CSS.
You can have a look at current-device, you just include the script, that then updates the <html> section with the appropriate classes based on the device's characteristics.
Hope this helps.
There is a query #media pointer, which determines whether the the user has a pointing device (like a mouse). Since mobile devices don't have a pointer, you could combine not: pointer and orientation: landscape, like this
#media (not: pointer) and (orientation: landscape) { ... }
Try this:
#media (orientation: landscape) {
}
Related
Total NOOB at web development and trying to teach myself here and it’s quite daunting to say the least, but I’m having fun nonetheless.
Anyway, I know that media queries affect the way mobile devices render the page on various screen sizes, but I want to know if there’s just one media query that can affect ALL mobile devices regardless of screen size?
I just want to make sure it won’t affect the Desktop.
For instance I want to tweak a navigation menu on all mobile devices, but I don’t want to meticulously change each media query that pertains to a screen size in my style.css.
I just want to create one media query to make this tweak that will affect all mobile screen sizes.
Hope that makes sense.
As always, you all are awesome!
Thanks for your help!
happy that you are choose to learn Web-Development.
But your way sounds more complicated than it is. First, Desktop and Mobile can be the same at all. It only counts down to Media Queries. On a Desktop, your Browser can be have the same width as a mobile device. So you need to clarify in your Project at which point you want to show the User the "Mobile" Styles and when to display the "Desktop" Styles. In most Projects I worked or saw, the default Media Queries are something like that:
#media (min-width: 320px) {}
#media (min-width: 768px) {}
#media (min-width: 1024px) {}
#media (min-width: 1220px) {}
#media (min-width: 1440px) {}
So you see on every media query you can attach some new styles for the selected query size. To make its easier for writing styles and don't override all these things on every new width, you can make something like that:
#media (min-width: 320px) {} // for general stylings (both, mobile && desktop)
#media (max-width: 767px) {} // for only styles between 320px and 768px (most mobile devies)
#media (min-width: 768px) {} // general desktop && tablet styles if needed
#media (min-width: 768px) and (max-width: 1024px) {} // only tablet styles
#media (min-width: 1025px) // start with desktop styling
All these styles between the media queries are only attached to the sizes.
So just choose your needed width, for example:
All mobile styles attached only between 320px and 1024px
#media (min-width: 320px) and (max-width: 1024px) {
.nav{ background: red; }
}
All desktop styles attached only after 1025px
#media (min-width: 1025px) {
.nav{ background: green; }
}
All these media queries just show the different widths, you also can do this by heights, but its way more difficult because of the device/display sizes.
If you really want to check the User Agent and divide between the browser, agents, devices or something like that you will need JavaScript and thats way more complex than just display the styles for different widths.
I hope this helps you! If you have any questions about Media Queries and how to write them correctly, MDN is a good resource: MDN - Media Queries
For anyone looking for a generic and easy media query for mobile, I would suggest the following:
#media screen and (max-width: 767px) {}
Similar to the suggestion by #m4n0, but this is the correct query including the "and". This is a good start, and then you can continue to define more breakpoints as you need more responsiveness along the way.
It depends on is your mobile layout is designed. As even in the mobile view you need to think about Portrait and landscape mode.
For some common styling, I normally use
#media screen (max-width: 767px) { }
You can also use orientation to set media queries like below
#media screen and (max-device-width: 480px) and (orientation: portrait) {
Your classes here
}
#media screen and (max-device-width: 640px) and (orientation: landscape) {
Your classes here
}
Great question, Android and Apple devices in my search normally fall within 450px in portrait and 800px on landscape, I would suggest you create a media query for both these sizes and you would have covered a high number of mobile devices in both portrait mode and landscape mode. If you are targeting a specific device I would suggest looking up those specific screen viewport sizes and adjusting or adding more media queries to cover those cases. Hope this helps! Keep learning.
Credit to following link for Popular Device Screen Resolution Sizes
https://mediag.com/blog/popular-screen-resolutions-designing-for-all/
Credit to following link for great explanation of Responsive Design
https://www.toptal.com/responsive-web/introduction-to-responsive-web-design-pseudo-elements-media-queries
Client has the following display settings on Windows Surface. He is seeing a website quite differently that to what I am seeing. What CSS media query can I use to be able to make adjustments to allow for these specific settings
I would start with:
#media only screen and (min-width: 2736px) and (min-height: 1824px) and (orientation: landscape) {
...
}
You can also detect it via JS.
Read this: How to check if device is Windows Surface Tablet and browser is chrome or IE
And if it's a Surface, add some CSS class dynamically to the appropiate elements.
I have this css code that shows a div on retina displays.
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape){#warning-message,#wrapper{display:block;}}
The problem is that I don't want it to be shown on Mac but just on iPhones and iPads. How can I be more target specific?
Access the your developer tools in the browser(I use Chrome for this, press F12) and determine the screen sizes you'd like to modify(Chrome has them in the top left). For example, if you look up a macbook with an 11 in. screen it's only 1366 x 768, but your largest ipad will be 768 x 1024. You can make specific media constraints per device by using "and" with your CSS tags. Otherwise, take a look at this link for more specific detail on the CSS media queries, you may have a "not '...' and is Retina" option.
#media not all and (monochrome) { ... }
#media (min-width: 700px) and (orientation: landscape) { ... }
Good Luck on your project!
I have a background image that looks fine in windows operating system but it looks cloudy and stretched in retina ready devices. Now I want to replace the background with a high resolution image in retina ready devices.
What is the best way to implement that? Either media queries or using javascript or anything else?
You can generally target high DPI (Dots Per Inch) displays using Media queries like this:
#media only screen and (min-device-pixel-ratio: 2) {
/* high-DPI stuff here */
}
Just be aware that this will target anything that meets the ratio requirement.
If you want to target Retina displays specifically, you'd need to add something to make the media query more specific. Here's how Chris Coyier does it:
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
All these different targeting methods have different levels of support, so it's useful to know a few.
There may already be several devices that meet these conditions, so you could target it another way by using extra conditions to make it even more specific.
For example, to target the Retina iPhone 5/5S/5C for example, you could use this:
#media (-webkit-min-device-pixel-ratio: 2) and (width:640px) and (orientation:portrait) {
/* Retina-specific stuff here */
}
#media (-webkit-min-device-pixel-ratio: 2) and (width:1136px) and (orientation:landscape) {
/* Retina-specific stuff here */
}
But as always, it's not recommended to target specific devices, it's a never-ending workload.
For my CSS media queries I've set it up mobile first which deals with all the overall styling.
I then have:
#media only screen and (min-width : 790px) {
}
#media only screen and (min-width : 990px) {
}
and I've added in
#media screen and (orientation: landscape) and (max-width: 520px) {
}
which deals with the CSS changes when the smart phone is turned round to landscape mode, but it doesn't seem to work, am I writing the landscape media query wrong?
Had a similar issue: my iPod/iPhone devices were detected as portrait orientation even when rotated.
I managed to resolve that with the following media query:
#media screen and (min-aspect-ratio: 4/3)
{*your styles here*}
If you want to target any case when width is greater than height, I think something like (min-aspect-ratio: 101/100) or something like this might work. However, for current devices 4/3 is sufficient, I think.
If you need aspect ratio for landscape, I think min-aspect-ratio: 1 suffices ... and therefore max-aspect-ratio: 1 for portrait.
But, even when the CSS is correct, there's an additional step required for a Cordova / PhoneGap app: Why doesn't my Cordova/PhoneGap iOS app rotate when the device rotates?
I found this StackOverflow item before that one, so perhaps others will also find a cross-link useful.