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
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
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.
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 the standard mobile first method for a responsive site which works great for most phones. my current mobile breakpoint is
#media only screen and (max-device-width : 768px)
however, this does not pick up my new turbo 2 or the iphone 6 as both of these phones have screens that register at 980px.
does anyone have a good media query style fix?
I have this media query for my mobile display
#media only screen and (max-width: 760px), only screen and (max-device-width: 760px)
But other phone device works fine whenever when I turn landscape view in mobile. But iphone 6 and Mini iPad won't display when landscape view. What exactly do I need to add to let the device work and display?
Iphone 6 and iPad have an horizontal resolution bigger than 760px so both media queries are false and whatever css rule you have inside will not be applied.
You need a "tablet" rule for the landscape mode e.g. with 1024px or even higher breakpoint