I have a set of rules I'd like to apply to all screens smaller than 960px wide.
The obvious was:
#media only screen and (max-width : 959px)
However this fails with iPad in portrait mode. I've read that iPad reports its width and height the same regardless of orientation.
Is there a standard way of making sure the iPad (or other devices that use the same logic as the iPad) respect actual width being viewed?
Obviously I'd prefer to avoid "iPad-specific" rules, or orientation queries - the query should apply to any screen less than 960 pixels wide.
Thanks.
Try using #media only screen and (max-device-width : 1024px) instead. That should cover an iPad in landscape or portrait.
I've read that iPad reports its width and height the same regardless of orientation.
This is tricky. The iPad reports the same max-device-width regardless of orientation. However, it correctly respects different max-width at different orientations/widths. The device is the part that doesn't change.
Hope this helps.
Related
Can someone tell me the width and height in px (as used by CSS in mobile mode) for the Pixel and Pixel LG?
Surprised that the Pixels do not yet appear as options in Chrome's emulator! Note that I'm not asking for the tech specs that can be found on the Pixel website.
The specs for the Google Pixel are :
1140px x 2560px
441dp x 731dp
16:9 ratio
If you want to target it with media queries:
#media only screen and (-webkit-min-device-pixel-ratio: 1.77) and (orientation:landscape) // or (orientation:portrait) {}
Works for me, but it also reach other mobiles like the recent Galaxy's.
I'm testing my responsive website and sadly, the Chrome emulator is not showing the responsive views when I select a device e.g "iPhone 6". The nasty scroll bars appear and looks horrible however, when I resize my browser the breakpoints are working perfectly?
This is how I am defining my breakpoints - the variable $screen-md is set within a variable. I'm using SASS.
#media screen and (min-width: $screen-md) { }
Here is a screenshot of what's happening in the Chrome Emulator.
1) Check if $screen-md is storing 375px since Iphone6 is 375px wide
2) Change your min-width to max-width.
Explanation with example:
#media only screen and (min-width: 375px) {...}
above code means "If [device width] is greater than or equal to [375px], then do {...}"
#media only screen and (max-width: 375px) {...}
above code means "If [device width] is less than or equal to [375px], then do {...}"
3) My personal experience with Chrome is that it sometimes doesn't load the media queries even if you are on the right viewport size. A few times, I had to increase the max-width value by 1 or 2 pixels to make it work. Try that too! Also, don't forget to clear your cache and refresh the page.
I am using Cordova to make a hybrid app.
I have the following media queries in my css file
#media only screen and (min-device-width : 320px) and (orientation: portrait) {
/*css goes here*/
}
#media only screen and (min-device-width : 320px) and (orientation: landscape) {
/*css goes here*/
}
and similarly media queries for all sorts of device width in both portrait and landscape orientation.
When I test my app on Nexus 4, it doesn't detect the orientation change and change the css, example, if I start the app in portrait mode, then based on the device width it picks up the media query of that width in the portrait mode, however if then I change the orientation of the phone, it doesn't detect the new width and apply the new css of the corresponding width and landscape orientation and vice versa.
Am I missing something here, isn't CSS Media query supposed to detect the change in orientation by itself and apply the appropriate CSS?
I also had an issue with this, where I would have a specific media query for portrait landscape and another for landscape, and it would switch fine from portrait to landscape the first time, but when you went back it wasn't updating.
#rockStar should get the credit for the answer, but using min-width instead of min-device-width did the trick for me as well.
Sorry i have been busy with my studies lately so i couldn't check stuff around here this days, Upon request,
using min-width is better than using min-device-width
and the reason would be in here.
Try using a CSS selector based on portrait and landscape mode, i.e you can use a class in landscape mode and apply css and remove the class when in portrait mode and apply css. So basically you can check whether a class exists or not.
So I always seem to do two identical media queries for smartphones, one being the min- or max-width, and the other being the min- or max-DEVICE-width (to target the iPhone and stuff)...
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
// Some awesome phone-specific CSS
}
#media only screen
and (min-width : 320px)
and (max-width : 480px){
// THE SAME awesome phone-specific CSS as above
}
Now I can't help but feel as though this is not the most efficient way to do things... Especially if I'm moving a lot of stuff around/restyling my site/application to be phone specific. Also especially when I have to do two more for the tablet sizes.
Now do I really need both? Does it matter and what exactly is the difference?
The difference between width and device-width can be a bit unclear. I'll try to explain.
device-width refers to the width of the device itself, in other words, the screen resolution of the device. Lets say your screen's resolution is 1280x800. This means the screen is 1280 pixels across, so it has a device-width of 1280 pixels.
In contrast, width refers to the width of your browser's viewport size.
In most cases width is more versatile when it comes to creating responsive webpages (and it is the method I would recommend you'd use), though device-width could be useful when you wish to specifically target mobile devices (and not desktops with a very small browser window).
DEVICE width will target only DEVICES and not desktops, u wouldnt hv any desktop/laptop of width 320x480, so u can use DEVICE width.
You could probably just use max-width: 767px this way you would target everything below an iPad.
I would also just specify dynamic widths so you don't have to differentiate between single devices.
I've built a nice template that has four different layouts using #media queries:
850+px width
<850px width
iphone landscape
iphone portrait
It works awesome, until you size your monitor window down to below 480px (iphone landscape) and then it starts picking up the smaller size #media queries.
Is there any way to avoid this?
I personally feel like it's desirable to display the "iPhone" layout at smaller browser window sizes, as your content has likely been optimized for that layout, HOWEVER, if you really want to prevent this you can play around with the device-width property in your #media declaration. Something like #media only screen and (max-device-width: 720px) { ... } will target device width rather than viewport width. Compare the behavior of this (viewport width) vs this (device width). Play around with the values (change min to max, change the pixel sizes, etc.) and observe the behavior. Also, don't forget that you can combine #media rules, e.g. #media (min-width: 400px) and (max-width: 600px) { ... }. See what works for you.
The problem with this method is that mobile devices come in all shapes and sizes, so you might be serving undesirable styles on a different mobile device (let's just say an Android phone...) that you hadn't planned on. However, depending on your needs, this might not matter to you.
Here is a list of example media queries and sizes to guide you, if you do decide to go this route: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ (sorry for the lack of a working link; apparently I'm not cool enough on StackOverflow to post multiple links yet)...