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

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

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

三種解決方式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，用戶不可擴(kuò)展，頁面不可縮放。

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

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

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

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

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

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

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

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

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

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