I saw a lot of media queries to target the portfolio for iphone 5, but not for landscape mode, is there one? I ask because this site that I work for a client has separate media queries for portrait and landscape mode, and I added this iPhone 5 CSS multimedia request to my portrait multimedia request for iphone 4, as suggested, but interestingly, what to do with the landscape part.
@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5),only screen (min-device-width:640px) and (max-device-width:1136px) and (-webkit-min-device-pixel-ratio:2) { body { background:#2d2928 url(images/bg960.jpg) no-repeat center top; background-size:480px 163px; font-size:96%; font-weight:300; padding:0 1%; } .logo a { display:block; margin:0 auto; width:260px; height:77px; background:url(images/logox2.png) no-repeat center center; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/logox2.png',sizingMethod='crop'); background-size:260px 77px; } #container { width:99%; margin:0 auto; } .frontimagewrapper { width:80%; } h1 { font-size:124%; } h2,h3,h4,h5, { font-family:"Trebuchet MS",Arial,Helvetica,sans-serif; letter-spacing:0.2em; font-size:100%; } .gallery h2 { font-size:96%; } .block h3 { font-size:96%; } .article h3 { font-size:100%; } .article h2 { font-size:106.6%; } p { font-size:0.9em; } .date { font-size:0.8em; } .copyright { font-size: 0.9em; } } @media only screen and (min-device-width:320px) and (max-device-width:480px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:2) { body { font-size:96%; } .frontimagewrapper { width:55%; } .blogleft img { max-width:60%; height:auto; } h1 { font-size:150%; } h2,h3,h4,h5, { font-family:"Trebuchet MS",Arial,Helvetica,sans-serif; letter-spacing:0.2em; font-size:100%; } .article h2 { font-size:118%; } .date { front-size:50%; } p { font-size:0.9em; line-height:1.825em; } .date { font-size:0.8em; } .copyright { font-size: 0.9em; } }
source share