为了应对移动设备屏幕的碎片化,我们在开发移动互联网应用时,一个最佳实践就是采用流式布的局,保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的问题就会凸显,我们至少需要处理一下当前显示元素的宽度的适配(当然,要做的可能不仅仅是这个)。很多时候,我们需要为不同的屏幕方向来设计对应的应用显示模式,这个时候,实时地获知设备的模竖屏状态就显得极为重要。
<李> <>强window.orientation属性与onorientationchange事件
窗口。方向:这个属性给出了当前设备的屏幕方向,0表示竖屏,正负90表示横屏(向左与向右)模式
onorientationchange:在每次屏幕方向在横竖屏间切换后,就会触发这个窗口事件,用法与传统的事件类似,
1:使用onorientationchange事件的回调函数,来动态地为身体标签添加一个叫东方的属性,同时以身体[东方=landspace]或[东方=]画像的方式在css中定义对应的样式,这样就可以实现在不同的屏幕模式下显示不同的样式。如下代码示例:
& lt; !Doctype html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元id="视窗" name="视窗"内容=翱矶?设备宽度,初始=1.0,“比;
& lt; title>横竖屏切换检测& lt;/title>
& lt;风格类型=" text/css "比;
身体(东方=景观){
background - color: # ff0000;
}
身体(东方=肖像){
background - color: # 00飞行符;
}
& lt;/style>
& lt;/head>
& lt;身体东方=發andspace”比;
& lt; div>
内容
& lt;/div>
& lt;脚本type=" text/javascript祝辞
(函数(){
如果(window.orient==0) {
document.body.setAttribute(“东方”、“肖像”);
其他}{
document.body.setAttribute(“东方”、“景观”);
}
}) ();
window.onorientationchange=function () {
身体var=document.body;
var视窗=. getelementbyid(“视图”);
如果(body.getAttribute(“东方”)==熬肮邸?{
body.setAttribute(“东方”、“肖像”);
其他}{
body.setAttribute(“东方”、“景观”);
}
}；
& lt;/script>
& lt;/body>
& lt;/html>
, 2:类似的思路,不通过CSS的属性选择器来实现,如下代码的实现方案:
& lt; !Doctype html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元id="视窗" name="视窗"内容=翱矶?设备宽度,初始=1.0,“比;
& lt; title>横竖屏切换检测& lt;/title>
& lt;风格类型=" text/css "比;
.landscape身体{
background - color: # ff0000;
}
.portrait身体{
background - color: # 00飞行符;
}
& lt;/style>
& lt;/head>
& lt;身体东方=發andspace”比;
& lt; div>
内容
& lt;/div>
& lt;脚本type=" text/javascript祝辞
(函数(){
var init=function () {
var updateOrientation=function () {
面向var=window.orientation;
开关(方向){
90年情况:
-90年情况:
取向=胺缇啊?
打破;
默认值:
取向=靶は瘛?
打破;
}
document.body.parentNode.setAttribute(“阶级”,取向);
}；
window.addEventListener (“updateOrientation orientationchange”,假);
updateOrientation ();
}；
window.addEventListener (“DOMContentLoaded”内,init,假);
}) ();
& lt;/script>
& lt;/body>
& lt;/html>
之前
,
,,,这是一种更为方便的方式,使用纯CSS就实现了对应的功能,如下代码演示:
& lt; !Doctype html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元id="视窗" name="视窗"内容=翱矶?设备宽度,初始=1.0,“比;
& lt; title>横竖屏切换检测& lt;/title>
& lt;风格类型=" text/css "比;
@media所有(方向:景观){
身体{
background - color: # ff0000;
}
}
@media所有(方向:肖像){
身体{
background - color: # 00 ff00;
}
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div>
内容
& lt;/div>
& lt;/body>
& lt;/html>
之前
,
