CSS3 Orientation Demo

You're Viewing in: Portrait Mode Landscape Mode Unknown Mode

HTML:

<span class="portrait">Portrait Mode</span>
<span class="landscape">Landscape Mode</span>

CSS:

.portrait,
.landscape{display:none;}

@media all and (orientation:portrait) {
	.portrait{display:inline;}
}
@media all and (orientation:landscape) {
	.landscape{display:inline;}
}

或外链不同的CSS文件,每个CSS文件控制对应文字的显示隐藏:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">