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