移动端的自适配/js控制

JS自适应布局

最新推荐文章于 2025-06-20 01:07:27 发布

邓波home

最新推荐文章于 2025-06-20 01:07:27 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

http://www.shunar.cn http://www.geiar.com http://jgsxx.cn

本文链接：https://blog.youkuaiyun.com/dengboblog/article/details/52813287

web前端专栏收录该内容

63 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的移动端自适应布局方案，适用于宽度为640px的屏幕，通过调整视口元信息来确保不同设备上的显示效果一致。

+function(){
    adaptUILayout()
    function adaptUILayout(){

        var deviceWidth,
            devicePixelRatio,
            targetDensitydpi,
            //meta,
            initialContent,
            head,
            viewport,
            ua;

        ua = navigator.userAgent.toLowerCase();
        //whether it is the iPhone or iPad
        isiOS = ua.indexOf('ipad') > -1 || ua.indexOf('iphone') > -1;

        //鑾峰彇璁惧淇℃伅,骞剁煫姝ｅ弬鏁板€�
        devicePixelRatio = window.devicePixelRatio;
        devicePixelRatio < 1.5 ? 2  : devicePixelRatio;

        if(window.orientation == 0 || window.orientation == 180){//绔栧睆鐘舵€�
            if(window.screen.width < window.screen.height){
                deviceWidth = window.screen.width; 
            }else{
                deviceWidth = window.screen.height; 
            }
        }else{//妯睆鐘舵€� //window.orientation==90||window.orientation==-90
            if(window.screen.width > window.screen.height){
                deviceWidth = window.screen.width; 
            }else{
                deviceWidth = window.screen.height; 
            }
        }

        if(devicePixelRatio==2 && (deviceWidth==320 || deviceWidth==360 || deviceWidth==592 || deviceWidth==640)){
            deviceWidth*=2;
        }

        if(devicePixelRatio==1.5 && (deviceWidth==320)){
            deviceWidth*=2;
            devicePixelRatio = 2;
        }
        if(devicePixelRatio==1.5 && (deviceWidth==640)){
            devicePixelRatio = 2;
        }

        //鑾峰彇鏈€缁坉pi
        targetDensitydpi = 640 / deviceWidth * devicePixelRatio * 160;
        initialContent   = isiOS 
            ? 'width=' + 640 + 'px, user-scalable=no, minimal-ui'
            : 'target-densitydpi=' + targetDensitydpi + ', width='+ 640 +', user-scalable=no, minimal-ui';

        $("#viewport").remove();
        var head = document.getElementsByTagName('head');
        var viewport = document.createElement('meta');
        viewport.name = 'viewport';
        viewport.id = 'viewport';
        viewport.content = initialContent;

        head.length > 0 && head[head.length - 1].appendChild(viewport);
    }

    $(window).bind( 'orientationchange', function(e){
        adaptUILayout()
    });

}();

移动端的自适应有js控制，百分比，flex布局今天分享一个js控制自适应，引用就行移动端的width是640px，如果是其他的width 可以自己修改一下。

参考：http://vr013.com/