如何使网页自动适配手机端

网页自适应手机端的方式有两种：

1. PC端的设计与手机端相差不大，利用 @media媒体查询 调整百分比

2. PC端与手机端的设计分离，利用判断设备的方式作301跳转

 

下面就结合源代码讲一讲如何实际实现这两种方案：

第一步：在html代码中添加以下代码

<meta charset="utf-8" />
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="320" name="MobileOptimized">

 

第二步：

方案一：设置PC端内容区域width:1100px，添加以下代码：

.container{ width:1100px; max-width:100%; }
.container img{ max-width:100%; }

@media only screen and (max-width: 480px) {
           //此适配不一样手机型号下文字，图片的大小
}

@media only screen and (max-width: 375px) {

            //此适配不一样手机型号下文字，图片的大小
}

..//可继续

 

方案二：在PC端公共Header中，添加以下JS

<script type="text/javascript">
        if (window.location.toString().indexOf('pref=padindex') != -1) { } else {
            if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))) {
                if (window.location.href.indexOf("?mobile") < 0) {
                    try {
                        if (/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
                            window.location.href = "手机端连接";
                        } else if (/iPad/i.test(navigator.userAgent)) {
                        } else {
                        }
                    } catch (e) {
                    }
                }
            }
        }
</script>     

 

 

PS:欢迎扫描下方二维码或点击连接，加入QQ群