toin0u/gist:4538257

## gistfile1
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
    <style type="text/css">
        div     { display: none; font-size: 15px; color: #FF0000; }
        #title  { display: block; color: #000000; }

        /* iPhone 3 portrait */
        @media only screen
            and (device-height: 480px)
            and (-webkit-max-device-pixel-ratio: 1)
            and (orientation: portrait) {
                #iphone3_portait { display: block; }
        }

        /* iPhone 3 landscape */
        @media only screen
            and (device-height: 480px)
            and (-webkit-max-device-pixel-ratio: 1)
            and (orientation: landscape) {
                #iphone3_landscape { display: block; }
        }

        /* iPhone 4 retina portrait */
        @media only screen
            and (device-height: 480px)
            and (-webkit-min-device-pixel-ratio: 2)
            and (orientation: portrait) {
                #iphone4_retina_portait { display: block; }
        }

        /* iPhone 4 retina landscape */
        @media only screen
            and (device-height: 480px)
            and (-webkit-min-device-pixel-ratio: 2)
            and (orientation: landscape) {
                #iphone4_retina_landscape { display: block; }
        }

        /* iPhone 5 or iPod Touch 5th generation, portrait */
        @media only screen
            and (device-height: 568px)
            and (-webkit-min-device-pixel-ratio: 2)
            and (orientation: portrait) {
                #iphone5_portait { display: block; }
        }

        /* iPhone 5 landscape */
        @media only screen
            and (device-height: 568px)
            and (-webkit-min-device-pixel-ratio: 2)
            and (orientation: landscape) {
                #iphone5_landscape { display: block; }
        }
    </style>
</head>
<body>
    <div id="title">If displaying with a iPhone, only one of the following divs should show</div>
    <div id="iphone3_portait">This is the iPhone 3 portrait</div>
    <div id="iphone3_landscape">This is the iPhone 3 landscape</div>
    <div id="iphone4_retina_portait">This is the iPhone 4 (retina) portrait</div>
    <div id="iphone4_retina_landscape">This is the iPhone 4 (retina) landscape</div>
    <div id="iphone5_portait">This is the iPhone 5 portrait</div>
    <div id="iphone5_landscape">This is the iPhone 5 landscape</div>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
	<style type="text/css">
	div { display: none; font-size: 15px; color: #FF0000; }
	#title { display: block; color: #000000; }

	/* iPhone 3 portrait */
	@media only screen
	and (device-height: 480px)
	and (-webkit-max-device-pixel-ratio: 1)
	and (orientation: portrait) {
	#iphone3_portait { display: block; }
	}

	/* iPhone 3 landscape */
	@media only screen
	and (device-height: 480px)
	and (-webkit-max-device-pixel-ratio: 1)
	and (orientation: landscape) {
	#iphone3_landscape { display: block; }
	}

	/* iPhone 4 retina portrait */
	@media only screen
	and (device-height: 480px)
	and (-webkit-min-device-pixel-ratio: 2)
	and (orientation: portrait) {
	#iphone4_retina_portait { display: block; }
	}

	/* iPhone 4 retina landscape */
	@media only screen
	and (device-height: 480px)
	and (-webkit-min-device-pixel-ratio: 2)
	and (orientation: landscape) {
	#iphone4_retina_landscape { display: block; }
	}

	/* iPhone 5 or iPod Touch 5th generation, portrait */
	@media only screen
	and (device-height: 568px)
	and (-webkit-min-device-pixel-ratio: 2)
	and (orientation: portrait) {
	#iphone5_portait { display: block; }
	}

	/* iPhone 5 landscape */
	@media only screen
	and (device-height: 568px)
	and (-webkit-min-device-pixel-ratio: 2)
	and (orientation: landscape) {
	#iphone5_landscape { display: block; }
	}
	</style>
	</head>
	<body>
	<div id="title">If displaying with a iPhone, only one of the following divs should show</div>
	<div id="iphone3_portait">This is the iPhone 3 portrait</div>
	<div id="iphone3_landscape">This is the iPhone 3 landscape</div>
	<div id="iphone4_retina_portait">This is the iPhone 4 (retina) portrait</div>
	<div id="iphone4_retina_landscape">This is the iPhone 4 (retina) landscape</div>
	<div id="iphone5_portait">This is the iPhone 5 portrait</div>
	<div id="iphone5_landscape">This is the iPhone 5 landscape</div>
	</body>
	</html>