1：針對移動裝置最常用的
在顯示面積上手機螢幕相對桌面顯示器要小很多，在幾年前(現在也如此)大部分**都是為桌面顯示器瀏覽而設計，很少考慮到適應手機螢幕，所以如果用手機瀏 覽大多**時會出現問題，比如常見固定寬度的網頁會出現橫向豎向滑動條，當然這不算什麼大問題；但如果是瀏覽流動布局的網頁那情況會非常糟糕，設想乙個寬 度為30%的側邊欄對於320px手機螢幕而言也就96px，只能容納8個12px的漢字，可閱讀性非常差。
在iphone的320px物理螢幕上——視覺視窗(visual viewport)，建立出了乙個980px的虛擬視窗——布局視窗(layout viewport)，在視覺視窗(visual viewport)中我們可以拖動橫向豎向滑動條或者放大縮小網頁，來達到最佳的瀏覽效果(類似桌面瀏覽器)；而布局視窗(layout viewport)用來配合css渲染布局，例如當我們設定乙個容器的寬度為100%時，這個容器的實際值為980px而不是320px。如此一來大部分 網頁就能以縮放的形式正常的顯示在手機螢幕上了。如何設定viewport有了layout viewport似乎解決手機瀏覽網頁的難題，但如果遇到專門為手機優化的網頁就又有新的問題：是的，因為iphone的layout viewport預設為980px，導致專為其優化的320px寬的頁面只能以縮放的方式顯示，這時就需要對viewport進行設定：這個是最常見的一條viewport meta**，將viewport定義為：寬度為裝置寬度，初始縮放比例為1倍，禁止使用者縮放。設定好後我們的頁面就顯示完美了：viewport全部屬性&值如下：width: viewport寬度
height: viewport高度
initial-scale: 初始縮放比例
maximum-scale: 最大縮放比例
minimum-scale: 最小縮放比例
user-scalable: 是否允許使用者縮放例：width=960 或 device-width
height=1000 或 device-height
initial-scale=0.5
maximum-scale=2
minimum-scale=1
opera: 850px
android webkit: 800px
meta標籤總結
標籤可提供頁面資料的元資訊 meta information 標籤位於文件頭部，不包含內容，其屬性定義了與文件關聯的鍵值對。簡單來說，就是文件資訊描述的標籤。我們從以下幾個方面來看看的實際用途。比如 此屬性包含http equiv或name屬性的值，具體取決於所使用的值。這個列舉屬性定義了能改變伺服...
常用meta標籤總結
常用meta標籤總結seo 優化部分 your title viewport viewport主要是影響移動端頁面布局的，例如 content 引數 width viewport 寬度 數值 device width height viewport 高度 數值 device height initi...
meta常用標籤總結
meta元素共有三個可選屬性 http equiv name和scheme 和乙個必選屬性 content content定義與 http equiv 或 name 屬性相關的元資訊屬性值 描述http equiv content type expire refresh set cookie 把co...