pc页面适应手机大小

 <meta name="viewport" content="width=device-width, 
 							    initial-scale=0.3,
 							    minimum-scale=0.3, 
 							    maximum-scale=2.0, 
 							    user-scalable=yes">

视口（Viewport）元标签详解

以下是对视口元标签中各项属性的详细解释：

width=device-width
该属性将视口的宽度设置为设备屏幕的宽度（单位为CSS像素）。
确保页面宽度与设备屏幕宽度一致，避免默认的浏览器视口行为（如移动端可能出现的缩放问题）。

initial-scale=0.3
定义页面的初始缩放比例。
值为1.0时表示不缩放，0.3表示页面初始加载时缩小至原始尺寸的30%。
适用于需要默认缩小显示的场景。

minimum-scale=0.3
允许用户缩小的最低比例。
在此配置中，用户可将页面缩小至初始尺寸的30%，防止过度缩小导致内容不可读。

maximum-scale=2.0
允许用户放大的最高比例。
用户可放大至初始尺寸的200%，但无法进一步放大，避免布局破坏。

user-scalable=yes
允许用户通过手势（如双指 pinch）调整页面缩放比例。
若设置为“no”，则禁用用户缩放功能。

使用建议

• 在移动端开发中，通常需要结合width=device-width和initial-scale=1.0以确保页面自适应。
• 限制缩放比例（如minimum-scale和maximum-scale）时需谨慎，可能影响无障碍访问。
• 若需完全禁止缩放，可设置user-scalable=no，但需确保文本大小和交互元素无需放大即可操作。