PC1秒适配手机端

理想方案：响应式设计布局

做法

直接删除该标签 <meta name="viewport">即可。

一、背景

• 需求：管理后台页面想要在手机端能看。
• 背景：管理后台没有适配，在手机端打开简直不能看
• 要求：1是能看；2是代价低；3是能接受缩放
• 技术栈：React
• 方案：响应式是保底方案

二、步骤

1. 有 creact-react-app 生成的项目中的 index.html 文件的头部都有关于移动端 viewport 的配置描述
2. 删除移动端窗口配置

<!-- 删除该标签 -->
<meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
 />

3.检查所有页面，微调局部即可完成

三、优缺点

• 优点：方便快捷，代价低
• 缺点：相对响应式布局方案来说，体验较差

四、参考资料

• meta
• metadata names

viewport: gives hints about the size of the initial size of the viewport. Used by mobile devices only.

视口：提供有关视口初始大小的提示。 仅由移动设备使用。

直接删除该标签 <meta name="viewport">即可；且不影响PC效果。

五、示例

以ant.design官网为例。 这是PC网站效果

这是移动端响应式布局的适配效果

这是1秒适配的效果