bootstrap-viewport_bootstrap viewport-width-优快云博客

本文链接：https://blog.youkuaiyun.com/anshenggui/article/details/80291679

本文介绍了通过设置<meta>标签中的viewport属性来实现手机网页的布局适配。具体包括使用device-width实现页面自适应手机屏幕宽度，同时限制用户缩放比例以确保良好的浏览体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- viewport是针对手机浏览器开发的视口，只对手机有效果 -->
    <!-- width=600px是绝对宽度，而width=device-width是自适应手机宽度 -->
    <!-- user-scaclable=yes/no 用户界面是否支持缩放，yes表示支持，no则不支持 -->
    <!-- initial-scale是初始缩放倍数 -->
    <!-- maximum-scale允许用户最大缩放 -->
    <!-- minimum-scale允许用户最小缩放 -->
    <!-- <meta name="viewport" content="width=600px,height=900px,user-scalable=no,initial-scale=1.0"> -->
    <!-- <meta name="viewport" content="width=600px,height=900px,user-scalable=yes,initial-scale=1.0"> -->
    <!-- <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0"> -->
    <!-- <meta name="viewport" content="width=600px,height=900px,user-scalable=yes,initial-scale=2.0"> -->
    <!-- <meta name="viewport" content="width=600px,height=900px,maximum-scale=2.0,user-scalable=yes,initial-scale=1.0"> -->
    <meta name="viewport" content="width=device-width,height=900px,maximum-scale=2.0,minimum-scale=1.0,user-scalable=no,initial-scale=1.0">

    <title></title>
  </head>
  <body>
    <h1>首页</h1>
    <p>you are boy</p>
  </body>
</html>