screen.width
无论把浏览器缩小还是放大,screen.width的值都不会改变,但是IE9及以上浏览器才支持这个属性。
@media screen 媒体查询的巨大缺陷:
切换页面布局的时候JS逻辑耦合
注意点:
移动端浏览器不会接触到IE7/IE8
手机横竖screen.width都是屏幕竖着时候的宽度
打开控制台,进入手机模式,此时,screen.width也会跟着一起变(记得刷新下页面)
只要我们确认了用户的屏幕尺寸,我们就可以在一开始就确定我们的【页面布局】以及所需要的【交互】。
代码:
(function (doc, win) { var size = ''; var screenWidth = 0; var root = doc.documentElement; // 在html上生成一个class if(win.screen && screen.width) { screenWidth = screen.width; //alert(screenWidth); if(screenWidth >= 1200 && screenWidth <= 1920) { size = 'pc'; }else if(screenWidth <= 480) { size = 'mobile'; } // JS可以拿去判断 win.size = size; // CSS可以拿去写样式 root.className = size; } })(document, window); alert(window.size);
screen.width 方法的优点:
真实目前在线的有一定分量的项目验证过的
screen.width 方法的缺点:
缩小屏幕没法体验手机(必须切换到手机设备)
学习来自[ 张鑫旭的空间 ]