html5中让页面缩放的4种方法

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”/>

建议使用第2,4种

posted @ 2017-10-07 09:28  deep-thinking  阅读(6322)  评论(0编辑  收藏  举报