tag:blogger.com,1999:blog-35158555541194389032023-11-15T06:58:48.715-08:00iphone css media queries for 3,4,5 portait and landscape- Bob Stileshttp://www.blogger.com/profile/03323227344768867194noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-3515855554119438903.post-513493832941218962012-10-14T11:42:00.001-07:002012-10-14T11:42:30.525-07:00Media queries for iPhone 3,4,5 for landscape and portrait modes <br />
<br />
If you want to have complete control over with version of the iphone you are displaying to.<br />
<br />
This snippet should only display one of the divs (out of 6) that matches your phone and orientation.<br />
<br />
This code sample has all 6 media queries you need for each iPhone and mode out there.<br />
The viewport will fix the scale to 1 (ie, force the browser to not try to zoom in to fit), but will allow the user to scale it, which is nice for the user.<br />
<br />
Posting here so everyone can benefit from my learning. Couldn't find a single place on the web that had this all in one spot. I have tested on iPhone 3,4,5, both landscape and portrait modes.<br />
<br />
Enjoy.<br />
<br />
<!DOCTYPE html><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><br />
<head><br />
<br />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1"/><br />
<br />
<style type="text/css"><br />
div {<br />
display: none;<br />
font-size: 15px;<br />
color: #FF0000;<br />
}<br />
<br />
#title {<br />
display: block;<br />
color: #000000;<br />
}<br />
<br />
<br />
/* iPhone 3 portrait */<br />
@media (device-height: 480px) and (-webkit-max-device-pixel-ratio: 1) and (orientation:portrait) {<br />
#iphone3_portait{<br />
display: block;<br />
}<br />
}<br />
<br />
/* iPhone 3 landscape */<br />
@media (device-height: 480px) and (-webkit-max-device-pixel-ratio: 1) and (orientation:landscape) {<br />
#iphone3_landscape{<br />
display: block;<br />
}<br />
}<br />
<br />
/* iPhone 4 retina portrait */<br />
@media (device-height: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait) {<br />
#iphone4_retina_portait{<br />
display: block;<br />
}<br />
}<br />
/* iPhone 4 retina landscape */<br />
@media (device-height: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape) {<br />
#iphone4_retina_landscape{<br />
display: block;<br />
}<br />
}<br />
<br />
/* iPhone 5 or iPod Touch 5th generation, portrait */<br />
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait) {<br />
#iphone5_portait{<br />
display: block;<br />
}<br />
}<br />
/* iPhone 5 landscape */<br />
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape) {<br />
#iphone5_landscape{<br />
display: block;<br />
}<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="title"><br />
If displaying with a iPhone, only one of the following divs should show<br />
</div><br />
<div id="iphone3_portait"><br />
This is the iphone 3 portrait<br />
</div><br />
<div id="iphone3_landscape"><br />
This is the iphone 3 landscape<br />
</div><br />
<br />
<div id="iphone4_retina_portait"><br />
This is the iphone 4(retina) portrait<br />
</div><br />
<div id="iphone4_retina_landscape"><br />
This is the iphone 4(retina) landscape <br />
</div><br />
<br />
<div id="iphone5_portait"><br />
This is the iphone 5 portrait<br />
</div><br />
<div id="iphone5_landscape"><br />
This is the iphone 5 landscape<br />
</div><br />
<br />
</body><br />
</html><br />
<div>
<br /></div>
- Bob Stileshttp://www.blogger.com/profile/03323227344768867194noreply@blogger.com1