利用meta標簽設置viewport元標簽在HTML頁面的lthead部分添加ltmeta name=quotviewportquot content=quotwidth=devicewidth， initialscale=1， minimumscale=1， maximumscale=1， userscalable=noquot這有助于頁面在不同設備上保持原始比例，禁止用戶縮放頁面使用百分比法CSS百分比布局在CSS中使用百分比來設置。

通過設置viewport元標簽，可以控制瀏覽器中的viewport大小和縮放比例，實現(xiàn)自適應布局viewport元標簽內(nèi)通常包含設置設備獨立像素初始縮放比例以及最小和最大縮放比例的屬性，這些屬性幫助瀏覽器根據(jù)設備屏幕尺寸調(diào)整頁面布局采用rem單位進行布局，依據(jù)頁面根元素的字體大小來設置其他元素尺寸，實現(xiàn)自適應布局。

添加一個media屬性，用來包含你想要的特性，如視口的當前高度。

三種解決方式1 viewport屬性 2 CSS控制 3 JS控制 1 viewport屬性放在HTML的ltmeta中 html代碼ltspan style=quotfontsize xsmallquot lthead lttitleExmaplelttitle ltmeta name=”viewport” content=”width=devicewidth，userscalable=no” ltheadltspan meta中viewport的屬性如下。

width=devicewidth，initialscale=10， minimumscale=10， maximumscale=10， userscalable=noquot 解釋Viewport指用戶網(wǎng)頁的可視區(qū)域，content中的“width”指的是虛擬窗口寬度，上面代碼意為虛擬窗口頁面寬度初始比例為1，最小比例為1，最大比例為1，用戶不可擴展，頁面不可縮放。

不可以的，borderwidth 簡寫屬性為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度，最小為1px建議可以使用圖片背景，這樣子可以比1px更小的。

e避免使用W3C組織不推薦的排版屬性，用CSS代替viewport是html5新元素嗎不是 viewport是由Apple公司為了讓更多桌面網(wǎng)站可以在safari瀏覽器內(nèi)正常顯示而推出的解決方案，后被各大瀏覽器支持使用viewport可以自定義當前頁面在瀏覽器中以何種分辨率顯示而APICloud應用由于在引擎層做了多屏幕適配工作，如。

ARIA是一個W3C的標準主要用來對HTML文章中的元素指定“角色“，通過角色屬性來創(chuàng)建重要的頁面地形例如，header，footer，navigation或者aritcle很有必要這一點曾經(jīng)被忽略掉了并且沒有被廣泛使用，因為事實上并不驗證然而，HTML5將會驗證這樣屬性同時，HTML5將會內(nèi)建這些角色并且無法不覆蓋。

為了準確獲取手機屏幕的寬度和高度，可以使用JavaScript的和屬性然而，這些屬性得到的是設備像素可見寬高，例如iPhone 4s在微信內(nèi)設置viewport為1時為320*416手機480 微信狀態(tài)欄64，而iPhone 5里則為320*504在做移動端HTML5。

1首先，打開手機safari瀏覽器，進入瀏覽器界面2進入主界面后，搜索需要添加到主屏幕的網(wǎng)頁3在網(wǎng)頁所在的頁面，點擊下方轉發(fā)的圖標，如圖4在彈出的選框，下滑，找到并點擊添加到主屏幕5出現(xiàn)的頁面，點擊右上角的添加即可。

由于HTML5和微信內(nèi)置瀏覽器的火爆，移動端H5網(wǎng)頁越發(fā)流行在設計制作移動端網(wǎng)頁的時候，你是否疑惑，這種網(wǎng)站設計稿應該做成的多少屏寬，是否應該跟手機的分辨率一致，還是應該按照iPhone的分辨率來設計注意H5網(wǎng)頁區(qū)別于APP，APP的設計稿直接按照手機分辨率來設計？那么對于現(xiàn)在2K屏幕的手機，應該如何制作設計稿和前端稿呢。

1，輸入positionfixedtop0left0將整個div固定在屏幕的頂部和左側2輸入width100％height100％min－width1000px這個可以適合div的高度和寬度，而min－width是為了實現(xiàn)讓屏幕寬度在1000px以內(nèi)時，div的大小保持不變3輸入backgroundsize coverwebkitbackgroundsize。

隨著高端手機Andriod，Iphone，Ipod，WinPhone等的盛行，移動互聯(lián)應用開發(fā)也越來越受到人們的重視，用html5開發(fā)移動應用是最好的選擇然而，每一款手機有不同的分辨率，不同屏幕大小，如何使我們開發(fā)出來的應用或頁面大小能適合各種高端手機使用呢學習html5 viewport的使用能幫你做到這一點viewport。

例如得到Web版從 meta 的含義就知道，它表示元信息 meta 標簽是一組鍵值對，一般用 name 和 content 分別表示鍵和值，在 head 中可以出現(xiàn)多個 meta 標簽基本用法是這樣的上面的標簽表示頁面所在的Web應用名為StackOverflow從HTML5開始，為了簡化寫法， meta 標簽新增了 charset 屬性添加了。

項目二HTML5+CSS3基礎項目 所含知識點HTML5新增的元素與屬性，表單域增強元素，CSS3選擇器，文字字體相關樣式，CSS3位移與變形處理，CSS3 2D轉換與過度動畫，CSS3 3D轉換與關鍵幀動畫，彈性盒模型，媒體查詢，響應式設計項目三WebApp頁面布局項目 所含知識點移動端頁面設計規(guī)范，移動端切圖。