html5中讓頁面縮放的4種方法
阿新 • • 發佈：2018-12-23
1.viewport
這種方法，不是所有的瀏覽器都相容
<meta name="viewport" content="width=640,minimum-scale=0.5,maximum-scale=1.0,user-scalable=no, initial-scale=1.0" />
2.百分比
這種方法，可以相容大部分瀏覽器，但是修改幅度比較大
.main .login .txt1{margin-top:8.59375%; position:relative;}
3.css transform
這種方法，可以相容大部分瀏覽器，但是頁面的位置是居中的
.w320
{
transform: scale(1,1);
-ms-transform: scale(1,1); /* IE 9 */
-webkit-transform: scale(0.8,0.8); /* Safari and Chrome */
}
4.使用響應式佈局，但是這樣的話得做兩個兩套介面
<link rel=“stylesheet” type=“text/css” media=“only screen and （max-width： 480px），only screen and （max-device-width： 480px）” href=“link.css”/>
這種方法，不是所有的瀏覽器都相容
<meta name="viewport" content="width=640,minimum-scale=0.5,maximum-scale=1.0,user-scalable=no, initial-scale=1.0" />
2.百分比
這種方法，可以相容大部分瀏覽器，但是修改幅度比較大
.main .login .txt1{margin-top:8.59375%; position:relative;}
3.css transform
這種方法，可以相容大部分瀏覽器，但是頁面的位置是居中的
.w320
{
transform: scale(1,1);
-ms-transform: scale(1,1); /* IE 9 */
-webkit-transform: scale(0.8,0.8); /* Safari and Chrome */
}
4.使用響應式佈局，但是這樣的話得做兩個兩套介面
<link rel=“stylesheet” type=“text/css” media=“only screen and （max-width： 480px），only screen and （max-device-width： 480px）” href=“link.css”/>
建議使用第2，4種
http://blog.chinaunix.net/uid-11121450-id-3957237.html