I'm trying to target tablets when in landscape like so:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1280px)
and (orientation : landscape) {
but this affecting desktop too, but I don't understand why it would as I thought landscape would only detect devices whose orientation can be changed.
landscape only indicates (from docs)
Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.
You have to do some restrictions with media type or consider using Modernizr
if (Modernizr.touch){
// bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
// bind to normal click, mousemove, etc
}
Related
I've set my media queries to be:
#media screen and (min-device-aspect-ratio: 1/1) and (orientation: landscape) {
// code here
}
#media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait) {
// code here
}
I've had to include the device-aspect-ratio to offset the change in orientation caused by the soft keyboard in Chrome mobile. It works well enough, but when testing on iPad, I've found that when turning it to landscape mode, it sticks to showing the portrait styles instead of landscape.
It works for iPad on landscape when I remove the min-device-aspect-ratio for the landscape styles, but then this causes the orientation to change from portrait to landscape on Chrome mobile view with soft keyboard. Does anyone know of any media queries to account for both these situations?
what happens when you switch it around? ie
#media screen and (orientation: landscape) and (min-device-aspect-ratio: 1/1) {
// code here
}
I am creating an android app using web view.My app always open in landscape mode.I need different UI for mobile and tab(both in landscape mode).How to set landscape media queries for tab and mobile in css?
For a media query to set to landscape, you need to use the property orientation like this :
#media all and (orientation: landscape) { ... }
To aim only mobile, tabs, computer screens, you need to use the rule screen. So the final result is something like this :
#media screen and (orientation: landscape) { ... }
I need to make specific changes to the page layout for iPads 3.There is any media query css for I-pad3 9'7inch screen 1536 x 2048 pixels (~264 ppi pixel density)
The media query itself doesn't appear to have changed significantly from the previous iterations of the iPad with the exception that pixel ratio is set to handle retina displays via the -webkit-min-device-pixel-ratio attribute :
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
/* Place iPad 3 Styles Here */
}
These higher-resolution retina displays generally still report the same device-width as earlier versions, but you can think of the previously mentioned attribute effectively as a "multiplier" to your minimum and maximum values.
IPad resolution is 768*1024, but a mobile maybe 720*1024. I want to set larger font for device, so that its size in pt is same as pad. for example:
#media (min-width: 700px) {
#div_test{
font-size:22px;
}
}
how to modify the #media condition?
#media (min-width: 700px){
/*code*/
}
The min-width property in the media query works a little different. It is not the resolution of the screen. It is equivalent css pixel.
Here are a couple of articles.
A pixel identity crisis.
A pixel is not a pixel is not a pixel.
moz media query page.
If you want to target device resolution you should use
#media all and (max-device-width: 320px) {
}.
max-device-width:This property measures the device-width. If you write css using media query using this it will get a little complex (mobiles tabs and even desktops can have 1080p resolution screens). In order to target device resolutions you might have to look into properties like -device-pixel-ratio, orientation and device-height to give better control of layouts.
Here is a list of media queries for ipad
This media query targets all ipads.
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
I am using the following media query for my site
#media (max-width: 976px) {}
I am finding that when i view my site
http://46.32.253.11/
on the ipad 3 in landscape mode the navbar button that appears in portrait mode doesn't work and my navbar is split over 2 lines.
Do i need to add another media query, or can i edit the existing one. If so what changes would i need to make.
Im really new to media queries so if anyone has an excellent resource they would like to share that would be great
Have a peek at this css-tricks article which has a bootstrap for standard device resolutions: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
There are specific media queries for landscape and portrait listed below:
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
I want to stress, though, that from a "mobile-first" approach, you shouldn't be designing for devices, but rather for resolution breakpoints that fit your design. Try starting with a very small resolution, like 320 x 480. From there, increase the browser width until that design "breaks" (i.e. looks like crap) and then add a breakpoint at that resolution. A handy way of checking the browser width is to open up your developer console in Chrome (or Firebug for Firefox) and typing in document.body.offsetWidth and hitting enter. That will show the pixel amount of the width of the browser. Keep adding / rearranging things until you get the experience you want on a wide range of devices.
The web is moving forward. This means that we have to think about smartphones all the way up to TVs and projectors. Design your site with that in mind.
I hope this helps.