| 123456789101112131415161718192021222324252627282930313233343536373839404142434445 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Document</title>
- </head>
- <body>
- <!--
- 1.设置视口的initial-scale
- document.write('<meta name="viewport" content="width=device-width,initial-scale='+ 1/window.devicePixelRatio +',user-scalable=no">');
- 通过window.devicePixelRatio获取到dpr，若dpr为2，则1px在retina屏上实际上横跨了2个像素，通过将scale设置为1/2，
- 2.使用transform中的scale属性 //width和height设为原来的2倍
- .box{
- width: 200px;
- height: 200px;
- border: 1px solid black;
- transform: scale(0.5);
- }
- -->
- <!--
- 设置meta标签，禁止用户缩放
- <meta name="viewport"
- content="width = device-width,
- user-scalable = no,
- initial-scale = 1.0,
- maximum-scale = 1.0,
- minimum-scale = 1.0"
- />
- 作用:告诉浏览器使用设备的宽度作为视图的宽度
- viewport 视图大小
- width 页面宽度
- device-width 设备的物理宽度(屏幕宽度)
- initial-scale 设备也没的初始缩放值 (值>1 放大; 值<1 缩小,最小为0，不能为负)
- minimum-scale 允许用户的最小缩放值
- maximum-scale 允许用户的最大缩放值
- user-scalable 是否允许用户进行缩放,值为no或yes
- (能够解决iPad切换横屏之后触摸才能回到具体尺寸的问题)
- -->
- </body>
- </html>
|
