伪响应式开发（PC和Mobile分离）

最新推荐文章于 2023-07-14 22:13:43 发布

转载最新推荐文章于 2023-07-14 22:13:43 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lqcdsns/p/5583764.html

本文介绍了如何使用screen.width属性来确定用户的屏幕尺寸，并据此调整页面布局。探讨了screen.width属性的特点，包括它在不同浏览器中的表现及局限性。

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);