在HTML中增加meta name="viewport"控制页面不随着放大缩小变形的实现方式

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42413684/article/details/81868541
  1.  PC端添加以下meta内容:

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

....

</head>

   

   2. Mobile端添加以下meta内容:

<head>

    <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

.....

</head>

 

说明:

    target-densitydpi=device-dpi,指定屏幕像素密度DPI,device-dpi 为设备原本的DPI值,不会有任何缩放。

    width=device-width,指定屏幕宽度,device-width设备屏幕的宽度。

展开阅读全文

没有更多推荐了,返回首页