如何使網頁自動適配手機端

時間 2019-11-07

標籤如何網頁自動適配手機欄目 HTML 简体版

原文原文鏈接

網頁自適應手機端的方式有兩種：javascript

1. PC端的設計與手機端相差不大，利用 @media媒體查詢調整百分比css

2. PC端與手機端的設計分離，利用判斷設備的方式作301跳轉html

下面就結合源代碼講一講如何實際實現這兩種方案：java

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

<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">

第二步：app

方案一：設置PC端內容區域width:1100px，添加以下代碼：scala

.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羣htm