| 12345678910111213141516171819202122232425262728293031323334353637383940 |
- <!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. 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 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>
|
