手機網頁 viewport 元素標記說明

2021-09-30 15:04:47 字數 1208 閱讀 3562

用法：

我們用乙個網頁來測試，未加viewport標記的原始網頁內容：

hello world!
顯示結果如下圖：

當然，我們也可以通過告訴瀏覽器網頁是針對手機瀏覽的。通過設定viewport的寬度等於「裝置寬度」（width=device-width），告訴瀏覽器，手機裝置寬度是320px，而不是預設980px價值。如果我們設定寬度= 320（width=320）將在iphone和其他一些智慧型手機上實現了相同的顯示結果，但並不是所有的手機都有這個確切的寬度，所以最好簡單地設定裝置的寬度，並讓手機瀏覽器弄清楚。

然後，我們在網頁上加上viewport標籤，內容如下：

hello world!
顯示結果：

這個viewport的元標記是許多智慧型**上的支援，從iphone到android的webos（palm）甚至internetexplorer mobile中的opera mini和opera mobile。

以下是m.yahoo.com上的viewport標記

在上面這個**中，禁止使用者進行縮放，你也可以允許讓使用者自行縮放，**如下：

由於viewport標記並不是所有瀏覽器都支援，當以上**無效時，你可以嘗試通過其它方式實現，如下：

或者

最後，如果你的網頁中的doctype是xhtml-mp或wml，您的**將被認定為乙個移動優化**。

android上的規則屬性

官方android文件中列出了乙個特殊的屬性，android已經加入到meta標籤：target-densitydpi。這個屬性允許開發人員指定螢幕解析度頁面已開發的，或者更具體如何處理的**，如影象的縮放。

這裡有乙個android下的viewport標籤的例子：

手機網頁 viewport 元素標記說明

用法 我們用乙個網頁來測試，未加viewport標記的原始網頁內容 hello world 顯示結果如下圖 當然，我們也可以通過告訴瀏覽器網頁是針對手機瀏覽的。通過設定viewport的寬度等於 裝置寬度 width device width 告訴瀏覽器，手機裝置寬度是320px，而不是預設980p...

手機網頁的HTML

元資料 定義快取 content的值 public 任何地方可以快取網頁 private 單個使用者私有，會在乙個私有快取區快取網頁，快取的網頁僅能傳送給單個客戶端 no cache 不能快取在任何快取區域 no store 響應和導致該響應的請求不能儲存在任何快取區內 no transform 有...

手機網頁開發簡單總結

1.手機螢幕的寬度不統一，我們強制給文件設定乙個比例 viewport content width device width,initial scale 1.0,maximum scale 1.0,user scalable 0 定義 device width是通知瀏覽器使用裝置的寬度作為可視區的寬...