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.
Related
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.
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 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
}
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 to target iPads:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* style */
}
From the testing I have done, this seems to work with all iPads (retina and non-retina). Why is this the case?
iPads without retina are 1024x768, but iPads with retina are 2048x1536. My media query does not include a 'device-pixel-ratio' property, so why is this targeting iPads with retina displays?
Although the Retina display has a resolution of 2048x1536, its device-pixel ratio of 2 means that the resolution as far as CSS is concerned is still 1024x768 (this is known as "CSS pixels"). The pixels are simply doubled when rendering pages onto the display, independently of how pixels are calculated by the browser for the purposes of CSS.
This is why the device-pixel-ratio/resolution media feature exists to distinguish high-resolution variants of specific devices.