嘻多瞇圖像傳達: 判別螢幕方向的&依照density切換顯示內容

orientation判別螢幕方向

@media only screen and(orientation:portrait){...........}
垂直
@media only screen and(orientation: landscape){...........}
水平

device-pixel-ratio判別density

在html寫入

<body>
<div id="d075">density為0.75時螢幕顯示</div>
<div id="d1">density為１時螢幕顯示</div>
<div id="d15">density為1.5時螢幕顯示</div>
<div id="d2">density為２時螢幕顯示</div>
</body>

在css寫入

<style>
div {display: none;}
@media only screen and (-webkit-device-pixel-ratio: 0.75)
{ #d075 {display: block;} }
@media only screen and (-webkit-device-pixel-ratio: 1)
{ #d1 {display: block;} }
@media only screen and (-webkit-device-pixel-ratio: 1.5)
{ #d15 {display: block;} }
@media only screen and (-webkit-device-pixel-ratio: 2)
{ #d2 {display: block;} }
</style>

Firefox和Opear 對device-pixel-ratio判別density的寫法

<style>
div {display: none;}

@media only screen and (-webkit-mindevice-pixel-ratio: 0.75),
only screen and (min--moz-device-pixel-ratio: 0.75),
only screen and (-o-min-device-pixel-ratio: 3/4)
{ #d2, #d15, #d1, #d075 {display: none;}
#d075 {display: block;} }

@media only screen and (-webkit-min-device-pixel-ratio: 1),
only screen and (min--moz-device-pixel-ratio: 1),
only screen and (-o-min-device-pixel-ratio: 1/1)
{ #d2, #d15, #d1, #d075 {display: none;}
#d1 {display: block;} }

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2)
{ #d2, #d15, #d1, #d075 {display: none;}
#d15 {display: block;} }

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1)
{ #d2, #d15, #d1, #d075 {display: none;}
#d2 {display: block;} }
</style>

<body>
<div id="d075">density為0.75時螢幕顯示</div>
<div id="d1">density為１時螢幕顯示</div>
<div id="d15">density為1.5時螢幕顯示</div>
<div id="d2">density為２時螢幕顯示</div>
</body>

參考資料：HTML5+CSS智慧型手機專用網站設計