Currently I'm using this media query for targeting mobile screens:
#media only screen and (max-width: 767px) {}
With this meta tag in the html:
<meta name="viewport" content="width=device-width, initial-scale=1">
It works fine on most devices, like iPhone, but when visiting the site from high-density devices like, Samsung S6-7 and so on, it serves the desktop version, with super tiny interface. If I change it to this:
#media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi) {}
It solves layout problems, boxes, containers, etc. looks the same, but UI is still super small.
How can I make the site look the same from all mobile devices (in portrait mode) regardless of actual hardware pixel densities?
It is now working on the S7 with this setup:
#media only screen and (-webkit-min-device-pixel-ratio: 4),
only screen and (-webkit-device-pixel-ratio : 4),
only screen and (device-width: 360px),
only screen and (device-width: 640px),
only screen and (orientation: portrait)
But it also works on an iPhone 6, that has a device-pixel-ratio of 2...
I don't know why it is working.
Related
I'm creating a responsive landing page and when I test it in different tablet devices, there are adjustments I want to make (paddings, margins, etc). I managed to target the normal breakpoints but I need to target more specific ones such as:
iPad Mini - 768 x 1024 with 324ppi
iPad 10 - 810 x 1080 with 264ppi
iPad 9 - 768 x 1024 with 264ppi
Can I get this specific? When I try, it ends up messing up my non-ipad media queries.
use media query with same parameters like
#media screen and (max-width:768px) will works for and iPad 9
#media screen and (max-width:768px) and (min-resolution: 300dpi) will works for iPad Mini
#media screen and (max-width:810px) will works for iPad 10
If you want to be as specific as you can, try setting the min and max widths, as well as device orientation and pixel ratio:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait)
For more you can check this article: Popular Devices Media Queries
I used media query to put my Homepage from Smartphone to Tablet and for this I used the size of a iPad 1/2.
After I finished my Website (for Tablet) it was looking fine on my Acer Tablet but on my Girlfriends iPad its completely messed up because its seems like its not loading the Tablet Version.
Is my Media-Query wrong but if this is the Problem why is it on my Acer Tablet fine?
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1)
If you want I can put in pictures of the fail iPad Version of the Homepage
That's probably happening due to the devise orientation (Portrait, Landscape).
iPad screen sizes
I'm on the latest version of Firefox on OSX (v46.0.1) and have implemented a tablet specific design using the following media query:
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px){}
Firefox ignores it completely. It also render the bootstrap xs size media query completely wrong but I don't expect anyone to ever see it (Firefox mobile works fine). I've turned off all the extensions in Firefox just in case but it didn't help.
Has anyone else experienced this?
Change min/max-device
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
To min/max-width
#media only screen and (min-width: 768px) and (max-width: 1024px)
The Reason
min/max-width
The width media feature describes the width of the rendering surface of
the output device (such as the width of the document window, or the
width of the page box on a printer).
min/max-device-width
Determines whether the output device is a grid device or a bitmap
device. If the device is grid-based (such as a TTY terminal or a
phone display with only one font), the value is 1. Otherwise it is
zero.
I'm using Twitter Bootstrap to responsive website and I don't understand the difference between
#media screen and (min-width: 768px)
#media (min-width: 768px)
"Screen" or not? any help?
http://www.w3.org/TR/CSS21/media.html#at-media-rule
#media screen is computer screen, so
The first rule is for computer screens only with resolution width at least 768px.
The second rule is just for devices with width >=768px including tablets, phones, printers etc., that have high enough resolution.
screen is a media type and means that rule will be used on computer screens. Without it it's just a general rule and will be applied for all media types.
The browser identifies itself as being in the “screen” category.
Specification
applies to devices of a certain media type (‘screen’) ,screen is intended primarily for color computer screens. So it identifies roughly to modern devices desktop smartphone etc
So it will work for color computer screens at differing resolutions e.g.
Mobile
only screen and (min-width: 480px)
Tablet
only screen and (min-width: 768px)
Desktop
only screen and (min-width: 992px)
Huge
only screen and (min-width: 1280px)
<link rel="stylesheet" media="only screen and (max-width:1280px)" href="css/article1280.css">
I'm in the middle of coding my responsive CSS and I realized that the Samsung Galaxy S4 smartphone has a screen resolution of 1080x1920—my 23" monitor is 1920x1080. I've never browsed on this phone (I have an iPhone 3 with a resolution of 320x480 which is what I thought all smartphones were around, somewhere under 800 pixels wide) so I'm a bit perplexed. How am I supposed to create a mobile website for a smartphone with a screen resolution of 1080x1920?
Galaxy S4 reports 360px x 640px to the browser
Aspect ratio is 9/16
Pixel ratio is 3
#media screen and (max-device-width: 360px)
#media screen and (-webkit-min-device-pixel-ratio: 3)
#media screen and (device-aspect-ratio: 9/16)
Some media queries that you might find useful in this case are:
#media screen and (orientation: portrait | landscape) { ... }
#media screen and (device-aspect-ratio: #/#) { ... }
Here's a link with more info: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
use #media screen and (max-device-width: your dimension here).
When designing on a GS4 it renders as a regular widescreen unless you use the viewport tag in your headers. I posted the example I use to make it responsive # Samsung Galaxy S4 Responsive Design #media
Make sure you have the viewport meta tag in your head section. Something like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tells the user-agent to take into account the pixel density and rescale accordingly. So your 1080px width Samsung Galaxy S4 will act like a 360px width screen.
Tested and working!
#media screen and (-webkit-min-device-pixel-ratio: 3.0) and (max-width: 1080px), screen and (max-width: 480px)