PC網(wǎng)站在手機(jī)上按比例縮小適應(yīng)屏幕代碼，有效實(shí)現(xiàn)PC站在移動(dòng)設(shè)備上完美展示。
實(shí)現(xiàn)效果：
實(shí)現(xiàn)方法：
在<head>與</head>之間加入以下代碼
<meta name="viewport" content="width=device-width, initial-scale=0,user-scalable=yes,maximum-scale=1.0"> |
一般情況下，我們?cè)O(shè)置視口標(biāo)簽meta的初始比例是1.0，用戶可根據(jù)實(shí)際測(cè)試請(qǐng)款該調(diào)整大小值。
這樣的話，如果設(shè)備的縮放比例devicePixelRatio為2的話，那么意味著手機(jī)會(huì)用2個(gè)物理像素來(lái)顯示1個(gè)像素，一般情況下，在pc中，我們會(huì)根據(jù)屏幕物理分辨路來(lái)設(shè)置顯示分辨率，用1個(gè)物理像素來(lái)顯示1個(gè)實(shí)際像素，以達(dá)到最佳的顯示效果，如果顯示分辨率小于物理分辨率（比如1920*1080的屏幕設(shè)置成1366*768），則會(huì)產(chǎn)生鋸齒，畫(huà)面變得粗糙。同理，在移動(dòng)端可以通過(guò)動(dòng)態(tài)調(diào)整縮放比例，來(lái)讓一個(gè)物理像素顯示一個(gè)實(shí)際像素，來(lái)達(dá)到最佳顯示效果，實(shí)際案例中，淘寶的移動(dòng)端就是動(dòng)態(tài)設(shè)置縮放比例。
content屬性值 :
- width:可視區(qū)域的寬度，值可為數(shù)字或關(guān)鍵詞device-width
- height:同width
- intial-scale:頁(yè)面首次被顯示是可視區(qū)域的縮放級(jí)別，取值1.0則頁(yè)面按實(shí)際尺寸顯示，無(wú)任何縮放
- maximum-scale=1.0, minimum-scale=1.0;可視區(qū)域的縮放級(jí)別，
- maximum-scale用戶可將頁(yè)面放大的程序，1.0將禁止用戶放大到實(shí)際尺寸之上。
- user-scalable:是否可對(duì)頁(yè)面進(jìn)行縮放，no 禁止縮放
