企业在搭建网站时要考虑移动优先的原则，在手机上、平板上都能正常显示的情况下再去做一些其他的工作，比如百度SEO优化等
把公司的门面放在6寸屏幕上要比做一台计算机上的网页难上很多倍。由于屏幕太小、手指太粗、网速不流畅以及用户只有短短几秒的时间来浏览——所以移动端优先的设计不是简单地把电脑网页缩小到手机上，而是以最小的屏幕为基础，信息层层向外扩散。
在最近两年里所遇到的企业官网改版需求中，大约有70%以上的用户是通过手机进行访问的，而平板电脑所占的比例虽然很小但是客单价通常较高，在工业制造、医疗器械以及教育培训等行业里，客户常常会用平板电脑来查阅资料。只有当它既能满足手机又能满足平板的需求的时候才算是真正完成了企业的网站建设
断点不是越多越好，只需要设置三个
很多建站者都会设置很多的断点，但是这样会使维护工作变得很困难。其实只需要掌握三个重要的宽度就可以解决大部分的问题：小于768px是手机竖屏、768-1024px之间的区域是平板竖屏和小屏幕横屏、大于等于1024px的就是平板横屏和桌面了。
目前手机主流宽度大约在360px到430px之间，在做视觉设计时通常以375px为准来进行绘图，并且用弹性布局来填充。平板部分要考虑到iPad竖屏834px、横屏1194px这两种情况最容易出错的是导航栏出现错位的问题。
除了设置 width=device-width 之外还可以加上 viewport-fit=cover 来应对刘海屏和底部黑色区域的问题，否则在 iPhone 上会出现一半被系统手势条遮住的情况。
不能用手指代替鼠标来操作，触摸区域也要大一些
鼠标指针的精度只有1像素，但是用手指点击时产生的误差可以达到几十像素以上。因此按钮应该设计得比较大一些，并且相邻两个按钮之间要留出大约8px左右的空间。单选框、复选框等元素最容易做得很小很挤，用户可能需要多次点击才能选中它们，从而导致跳出率增高
另外不能再用hover来实现交互效果了，因为手机没有悬停的功能。原来的PC端下拉菜单以及悬浮显示详情等功能在移动端要改成点击展开、长按或者跳转到二级页面。用:active来给出点击的反馈，使得按钮有一种被按下的感觉，并且让用户知道已经点击过了。
导航可以短一些，但是不能藏得太深
由于手机屏幕面积较小，所以顶部导航栏只能放logo、主要的操作按钮和汉堡菜单等内容，不能把所有信息都塞进抽屉里，否则用户就没有时间一条条看了。
平板电脑很容易被忽略掉，它的大屏幕可以不用像手机一样用抽屉式菜单来显示侧边导航和正文分栏，从而加快浏览速度。在展会或客户面前用平板电脑展示公司的网站时，双栏排版的效果要好得多。
底部导航栏适合用于栏目少、功能简单的网站，在栏目超过五个的时候就不应该再用它了。吸底式的咨询按钮以及电话按钮在手机上有比较好的转化率，但是要注意留出一定的空间，并且不能挡住文章的最后一句话。
首屏速度是移动端的一道生死线
手机用户对于等待的时间很在意，如果首屏加载超过3秒的话，那么大概有50%的用户会直接退出。所以“移动优先”的原则里，速度不是可以改进的地方，而是从一开始就要去考虑的。
立刻可以做到的事情包括：
- 把主要的CSS代码放到第一页上，其他样式用异步的方式引入，从而避免出现空白的现象
- 把所有的图片都转成WebP或者AVIF格式，并且使用srcset、sizes属性按照屏幕宽度提供不同尺寸的图片，在手机上不加载电脑版图片
- 除第一张图片外，其余的图片均使用懒加载的方式进行展示，而视频则用一个封面图来替代，只有当用户点击之后才会出现播放器
- 中文字体子集化或者用系统自带的字体库；在加载自定义字体时要加上
font-display: swap - 第三方脚本（比如统计代码、客服插件、地图等等）要延迟加载，并且不能放在
<head>标签里
如果进行了Lighthouse或者百度资源平台上的移动端抓取诊断，并且把LCP控制在2.5s以内、CLS控制在0.1以下的话，那么移动设备的用户体验评分也不会很低。
图片和文字之间的空隙
如果手机屏幕较窄的话，那么正文每一行的文字最好控制在20-30个字左右比较合适，行间距设置为1.6-1.75倍，并且要有足够的空间。正文字体大小不能小于16像素，在手机上14像素就显得很小了，老人看的时候会很吃力。
平板可以稍微宽松一点：正文采用双栏排版、字号设置为17-18px，图片要放大以突出产品特点，并且不限制图片的比例，在横竖切换时不会出现变形现象。
如果表单缺少某些字段的话，那么它的转化率就会更高
在手机上填写表格是一件很痛苦的事情，所以把表单里的字段减到了5个左右：姓名、电话、需求、行业、验证码等。给电话号码输入框加上 type="tel" 和 inputmode="numeric" 来调用数字键盘；邮箱用 type="email"；并且添加了 autocomplete 属性使浏览器能够自动填充。
增大提交按钮、使用高对比度颜色、把手指能够触到的地方放上它，验证码不用复杂的验证方式，而是用简单的短信验证码或者简单的滑动条来进行替代。
平板独有的特点有：横向显示、分屏、外接键盘
平板电脑通常被当成一部大手机使用，在企业网站上进行移动优化的时候就很不必要了。其中的一些具体问题如下：
横屏时采用双栏或三栏布局，左侧为导航栏、右侧为主内容区；原来的单列产品列表改为现在的两列；表格内容不再左右滚动而是以卡片的形式呈现；弹窗在平板上不能全屏显示而要居中并以卡片的方式展现出来；还要考虑支持键盘输入——很多商务人士会给自己的平板电脑配上外接键盘，并且要注意好Tab 焦点顺序和:focus-visible 样式的问题。
真实的手机测试比模拟器要好的多
模拟器只考虑了界面的问题，而真正的手机才会有bug。必须要有：一部iPhone使用Safari浏览器上网、一部高端Android手机使用Chrome浏览器上网、一部普通的Android手机使用系统自带的浏览器上网、一台iPad和微信内置的浏览器。
微信内置浏览器（X5内核）是各大企业官网绕不过去的一道坎，大部分用户都是通过公众号菜单进入该页面的。由于它对某些CSS属性支持得比较晚，所以在移动设备上使用100vh会出现地址栏收起时页面跳动的情况，而换成dvh则更为稳定一些。iOS Safari 的 position:fixed在输入框获得焦点的时候也会产生晃动现象，需要单独处理一下。
弱网测试也不可或缺：以3G限速的方式绕行一周，看主屏幕上是否会出现。
和百度收录相关的情况主要有以下这些
手机端做完之后要让百度能够抓取并正确解析。
URL要统一，不可以创建一个带m前缀的域名；如果存在因为历史原因造成的两个网站的情况，请向百度资源平台提交移动适配规则并加上canonical标记；所有的页面都必须注明响应式视口，在移动设备上不能使主体内容被弹窗、浮窗遮挡——百度会对首页强制弹出广告以及全屏广告的网站进行降权处理。
面包屑导航和结构化数据都要有企业名、地址、电话号码等信息；网页标题不能超过30个汉字，并且要含有核心业务词加上地域词；描述部分要用一句话概括，不能列出关键词；关键词密度控制在1%左右比较好，过多或者过少都不合适。
高频踩雷清单📌
- 把电脑上出现的浮动窗口放在手机上就会占据半个屏幕
- 如果有横向滚动条的话，则该元素一定被设定了一个固定的宽度或者有一个负值边距
- 图片被拉长、扭曲了，没有设置宽高比
- 首页轮播图强制展示五张照片，但是速度很慢而且没人会去注意第三张
- 因为输入法已经把提交按钮挤到外面去了，所以不考虑键盘弹起后造成的视口问题
- 只检查了Chrome而没有检查微信，用户看到的也是错误的版本
- 平板是用手机的方式安装的，空余空间比较大，感觉还没做完
移动端优先就是一种取舍的艺术，在屏幕很小的情况下要决定哪些内容可以保留下来，哪些内容又需要舍弃掉。手机端的重点是速度快、界面简单、转化路径短；而平板端则更加强调信息的丰富性和专业形象。只有两者都做到了位之后，企业网站才不会出现初次接触客户时就存在的问题。
好的移动响应式网页可以让用户感觉不到它存在：适当的页面内容出现在适当的地方，在3秒钟内就出现，填写表格也很轻松。做到以上几点之后，百度抓取体验分、用户停留时间以及表单转化率等问题也就迎刃而解了🎯