lovecoding
/
vipAllDay


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 
        viewport 视口
        content 内容
        width 宽度
        device-width 设备宽度
        initial-scale 初始缩放比例
     -->
    <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 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>