移動端適配

移動端適配

原創

皮卡洛

2020-02-21 04:24

使用的瀏覽器：Google；
驗證的編譯軟件：HBuilder、Sublime text3、Webstorm；

爲了方便觀察和修改，使用的是純靜態網頁；修改好後動態網頁也是同樣適用
初始pc端頁面如下圖所示

HBuilder上進行不同視窗的驗證查看
ios看到的頁面是：

ipad上看到的頁面是：

可見，以上兩種頁面，都需要手動向左滑動，才能看到完整的頁面；

Android上看到的頁面是：

可見，安卓系統上不用手動滑動，但是還是與pc端使用相同的比例，在手機上瀏覽的話，就不得不手動進行放大，才能達到好的視覺效果，並且右側有大面積區域是留白的；

爲了解決這些手機端的不適配問題，下面有兩種方法可借鑑：

1. 使用meta標籤，使網頁寬度自適應手機屏幕

在網頁的 head 之中添加 meta 標籤;

<meta name="viewport" content="width=device-width initival-scale=1.0 maximum-scale=1.0 user-scalable=no">

其中name=“viewport”（窗口）
width：控制 viewport 的大小，可以指定的一個值，如 600px，或者特殊的值；如 device-width ：爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）。還可以添加height；
initial-scale=1.0 ：確保網頁加載時，以 1:1 的比例呈現，不會有任何的縮放。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動縮放

添加後的效果如下
ios效果圖

ipad效果圖

圖片和文字的排版自動換行，右側的留白自適應了寬度後視圖更好看，內容完整，並且不需要向左滑動手機；適配成功；

Android（安卓手機截圖）效果圖

同樣達到了效果；

2.添加一段js代碼，對頁面進行縮放

<script>
    function bodyScale(){
        var devicewidth=document.documentElement.clientWidth;
        var Scale=devicewidth/640;
        document.body.style.zoom=Scale;
    }
    window.οnlοad=window.οnresize=function(){
        bodyScale();
    };
</script>