css media queries: target mobile devices without specifying width, pixel ratio, etc
In the CSS3 spec, @media handeld
is mentioned but it has perhaps no browser support.
So, no.
However, you might find this site useful, it explains other some media query techniques for mobile.
Media Queries: How to target desktop, tablet, and mobile?
IMO these are the best breakpoints:
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
Edit: Refined to work better with 960 grids:
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
In practice, many designers convert pixels to em
s, largely because em
s afford better zooming. At standard zoom 1em === 16px
, multiply pixels by 1em/16px
to get em
s. For example, 320px === 20em
.
In response to the comment, min-width
is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working your way onto larger and larger screens.
Regardless of whether you prefer min-
, max-
, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules.
Media Query to Target ONLY Mobile
Found the solution: https://stackoverflow.com/a/18500871/5906166
You need to include this in your header:
<meta name="viewport" content="width=device-width, initial-scale=1">
Explanation:
Fortunately, you can specify a viewport meta tag in the
<head>
section
of your document in order 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.
Media query for high resolution mobile 1080px (Xperia Z etc)
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
Related Topics
Mysterious Horizontal Lines on My Site When Rendered on Ipad
CSS Rules for Webkit Based Browsers
How to Apply Linear Gradient for Ie8
Is There an "Official"/Standard CSS3 Gradient Syntax
When Do We Use "Position:Relative" in CSS
Can a CSS Pseudo-Class Be Namespaced
Text in Outlook Doesn't Use Line-Height
Sprite Height Limitation for CSS Images
Horizontally Center <P> Within a Div While Keeping The Text Left-Aligned
Unbalanced CSS Columns in Chrome
Use Selector Name as Variable in Less Mixin
Nuxt & Vuetify: How to Control The Order in Which CSS Files Are Loaded