ipad 横屏竖屏 CSS

quasiceo 2014-12-29

展开全文

ipad 横屏竖屏 CSS

博客分类：

Html代码

/* 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 */
}

CSS media Query not working on ipad landscape (Bootstrap)

up vote0down vote favorite

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

css media-queries

share|edit

asked Jul 19 '12 at 13:00

Richlewis
1,8523721

1 Answer

active oldest votes

up vote3down voteaccepted

Have a peek at this css-tricks article which has a bootstrap for standard device resolutions: http:///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.