移動web開發基礎知識_html/css

廢話說了一推，說回重點：首先，移動web開發咱需要一個調試工具。

1.Google emulation：谷歌的移動端模擬器，簡單的理解為pc模擬手機的屏幕大小和瀏覽器特性的一個東東。

打開方式：打開chrome瀏覽器，然后F12鍵打開，開發者工具，點擊小手機的圖標，如下圖

打開的效果和各部分的功能作用：

首先我們在device里可以選擇需要模擬的設備，這個很重要，決定我們寫的頁面可以適配什么樣的手機

打開device下拉菜單看到可以模擬的設備：可以看到主流的手機這里基本都有了O(∩_∩)O

有了emulation我們可以很方便的做開發了。

2.veiwport: 什么是veiwport?

官方解釋：手機瀏覽器是把頁面放在一個虛擬的“窗口”（viewport）中，通常這個虛擬的“窗口”（viewport）比屏幕寬，這樣就不用把每個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的布局），用戶可以通過平移和縮放來看網頁的不同部分。移動版的 Safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放，其他手機瀏覽器也基本支持。

簡單的理解為，移動終端的可視區。

關于veiwport的有關設置：

常見的例子：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com