移动端兼容性

移动端网站最大的缺点是客户浏览的时候使用的设备屏幕比较小，限制了网站的特效和一些功能的发挥。还有就是图片加载速度，这个也是移动端的痛点，有的图片过大，造成错版而且对移动端网站加载的速度很慢，影响客户体验。解决方案是移动端图片建议不要超过640为宽度的图片，压缩图片，使用缓存技术，使用CDN，MIP或者调用第三方加载速度快的图片

页面细节优化

移动端页面反应速度和手机网络速度，手机的cpu性能 和页面本身的质量有关。移动端页面优化包含加载优化，图片优化,CSS优化，脚本优化,渲染优化

移动端和PC端网站页面的转换

独立的移动端网站，首页要做好PC端网站和移动端网站之间的适配，用户在移动端访问了网站，要能自动转向移动端，其次要对域名/文件夹名/index.html这样的页面进行优化。写规则或者301集中在同一个url上面

移动端外部优化

移动端网站也是一个单独域名的网站，外部链接对移动端具有投票左右和吸引蜘蛛作用，在高质量相关性强的链接有助于提升网站关键词排名和整体权重。

移动端适配现在普遍的都是用的框架，如果自己写的话会很麻烦，下面告诉大家两种移动端适配的方法，一种是框架，一种是不用框架的

原则

1. 开发时方便，写代码时设置的值要和标注的 160px 相关

2. 方案要适配大多数手机屏幕，并且无 BUG

3. 用户体验要好，页面看着没有不适感

思路

1. 写页面时，按照设计稿写固定宽度，最后再统一缩放处理，在不同手机上都能用

2. 按照设计稿的标准开发页面，在手机上部分内容根据屏幕宽度等比缩放，部分内容按需要变化，需要缩放的元素使用 rem, vw 相对单位，不需要缩放的使用 px

3. 固定尺寸+弹性布局，不需要缩放

viewport 适配

根据设计稿标准（750px 宽度）开发页面，写完后页面及元素自动缩小，适配 375 宽度的屏幕

在 head 里设置如下代码

initial-scale = 屏幕的宽度 / 设计稿的宽度

为了适配其他屏幕，需要动态的设置 initial-scale 的值

  [removed]
    const WIDTH = 750
    const mobileAdapter = () => {
      let scale = screen.width / WIDTH
      let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`
      let meta = document.querySelector('meta[name=viewport]')
      if (!meta) {
        meta = document.createElement('meta')
        meta.setAttribute('name', 'viewport')
        document.head.appendChild(meta)
      }
      meta.setAttribute('content',content)
    }
    mobileAdapter()
    [removed] = mobileAdapter //屏幕翻转时再次执行
  [removed]

缺点就是边线问题，不同尺寸下，边线的粗细是不一样的（等比缩放后），全部元素都是等比缩放，实际显示效果可能不太好

vw 适配（部分等比缩放）

1. 开发者拿到设计稿（假设设计稿尺寸为750px，设计稿的元素标注是基于此宽度标注）

2. 开始开发，对设计稿的标注进行转换，把px换成vw。比如页面元素字体标注的大小是32px，换成vw为 (100/750)*32 vw

3. 对于需要等比缩放的元素，CSS使用转换后的单位

4. 对于不需要缩放的元素，比如边框阴影，使用固定单位px

关于换算，为了开发方便，利用自定义属性，CSS变量

  
  [removed]
    const WIDTH = 750
    //:root { --width: 0.133333 } 1像素等于多少 vw
    document.documentElement.style.setProperty('--width', (100 / WIDTH)) 
  [removed]

注意此时，meta 里就不要去设置缩放了

业务代码里就可以写

header {
  font-size: calc(28vw * var(--width))
}

实现了按需缩放

rem 适配

1. 开发者拿到设计稿（假设设计稿尺寸为750px，设计稿的元素标是基于此宽度标注）

2. 开始开发，对设计稿的标注进行转换

3. 对于需要等比缩放的元素，CSS使用转换后的单位

4. 对于不需要缩放的元素，比如边框阴影，使用固定单位px

假设设计稿的某个字体大小是 40px, 手机屏幕上的字体大小应为 420/750*40 = 22.4px (体验好)，换算成 rem（相对于 html 根节点，假设 html 的 font-size = 100px,）则这个字体大小为 0.224 rem

写样式时，对应的字体设置为 0.224 rem 即可，其他元素尺寸也做换算...

但是有问题

举个 ，设计稿的标注 是40px，写页面时还得去做计算，很麻烦（全部都要计算）

能不能规定一下，看到 40px ,就应该写 40/100 = 0.4 rem,这样看到就知道写多少了（不用计算），此时的  html 的 font-size 就不能是 100px 了，应该为 (420*100)/750 = 56px，100为我们要规定的那个参数

根据不同屏幕宽度，设置 html 的 font-size 值

  
  [removed]
    const WIDTH = 750 //设计稿尺寸
    const setView = () => {
      document.documentElement.style.fontSize = (100 * screen.width / WIDTH) + 'px'
    }
    [removed] = setView
    setView()
  [removed]

对于需要等比缩放的元素，CSS使用转换后的单位

header {
  font-size: .28rem;
}

对于不需要缩放的元素，比如边框阴影，使用固定单位px

header > span.active {
  color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

假设 html 的 font size = 1px 的话，就可以写 28 rem 了，更方便了，但是浏览器对字体大小有限制，设为 1px 的话，在浏览器中是失效的，会以 12px（或者其他值） 做一个计算 , 就会得到一个很夸张的结果，所以可以把 html 写的大一些

使用 sass 库时

JS 处理还是一样的，但看着好看些

@function px2rem($px) {
  @return $px * 1rem / 100;
}

header {
  font-size: px2rem(28);
}

以上的三种适配方案，都是等比缩放，放到 ipad 上时（设计稿以手机屏幕设计的），页面元素会很大很丑，有些场景下，并不需要页面整体缩放（viewport 自动处理的也很好了），所以有时只需要合理的布局即可。

弹性盒适配（合理布局）

使用 flex 布局

section {
  display: flex;
}

总结一下，什么样的页面需要做适配（等比缩放）呢

• 页面中的布局是栅格化的

换了屏幕后，到底有多宽多高很难去做设置，整体的都需要改变，所以需要整体的缩放

• 头屏大图，宽度自适应，高度固定的话，对于不同的屏幕，形状就会发生改变（放到ipad上就变成长条了），宽度变化后，高度也要保持等比例变化

以上所有的适配都是宽度的适配，但是在某些场景下，也会出现高度的适配

比如大屏，需要适配很多的电视尺寸，要求撑满屏幕，不能有滚动条，此时若换个屏幕

此时需要考虑小元素用 vh, 宽和高都用 vh 去表示，中间的大块去自适应，这就做到了大屏的适配，屏幕变小了，整体变小了（体验更好），中间这块撑满了屏幕

对于更复杂的场景，需要更灵活考虑，没有一种适配方式可以囊括所有场景。

一、自主适配

站点自己做好PC与手机之间的适配，以及手机站各个版式之间的适配。当手机用户通过百度移动搜索或者其他方式访问站点的PC页时，站点将其自动适配到该PC页面对应的手机页，并为之选择合适的页面版本。

站点若暂不具备自主适配的能力，可以使用百度提供的终端适配服务，简单快捷地实现自主适配。即：站点调用百度终端适配服务API进行简单的开发，就可以获取到访客的终端信息（包含操作系统、浏览器、机型信息）及适配版式建议，根据这些信息在站点服务器上实施跳转进而完成自主适配。详情可点击查看终端适配服务介绍

举例：

1）频道页：当用户使用手机访问时，站点自行适配到

2）内容页：当用户使用手机访问时，站点自行适配到

生效情况：不仅限于百度移动搜索，当用户通过手动输入网址，或者通过其他移动搜索引擎、导航站等渠道访问站点时，适配同样有效。

二、标注Meta声明

站点如果自行适配有困难，可以在PC页面中做简单改造，百度协助实现适配效果。即：站长在站点PC页的源代码头部嵌入一行或多行Meta信息，由Meta信息来指明该PC页对应的手机页的URL，以及该URL对应页面的格式，百度将根据用户终端类型选择最适合展示的页面。（无对应关系的PC页面无需添加Meta ）

三、提交对应关系Sitemap

当站点推动PC页标注有困难时，可以选择提交PC页-手机页对应关系Sitemap，帮助百度在移动搜索结果进行替换。页面对应关系可以是url级别或者pattern级别的；站点也可以根据自身情况，将具备一定规律的url聚合成pattern，无法聚合的则仍以url对应形式存在，在站长平台分开提交。

url级别sitemap：通过XML文件描述url级别的PC页与手机页的对应关系。

pattern级别sitemap：一个pattern级别的对应关系，往往可以表示成千上万的url对应关系。通过pattern的形式批量的提交对应关系，能够大大减少站长提交的数据量。

提交方式：使用站长平台-对应关系提交工具进行提交

1.Meta声明格式：

注：A.加粗字体部分是需要站点自定义的内容。

[wml|xhtml|html5]——根据手机页的协议语言，选择其中的一种。

url=url——后者代表当前PC页所对应的手机页url，两者必须是一一对应关系

Meta声明示例：

2.站长需要将Meta声明放在PC页源代码内部，如下：

……

生效情况：标注Meta声明这一适配方案仅在百度移动搜索中生效，即只有当用户通过百度移动搜索访问站点时，适配才会生效；通过其他渠道则不生效。在标注准确对应关系无误的情况下，大约需要七天左右的时间生效，老旧页面会有延迟。但百度不保证一定能在移动搜索结果中按照您标注的对应关系进行替换。

生效情况：与meta方案相同，仅限于百度移动搜索中生效。在提交的对应关系无误的情况下，大约需要七天左右的时间生效，老旧页面会有延迟。百度不保证一定能在移动搜索结果中按照您提交的对应关系进行替换

以百度为例，现在百度都是推熊掌号，进入熊掌后找到搜索资源平台，然后进入找到移动适配：

添加适配关系，有规则提交还有多规则，还有url对适配。如果你不大会写正则表达式，可以跟技术人员对接，让他们写出移动网站和pc网站链接的正则式，规则多久多写几个，如果链接规则比较乱，就用url对适配。

比如你是pc www.xxx.com

然后移动是 m.xxx.com

那么你可以找出有对应关系的移动和pc链接，比如说内容页，那么可以通过excel表排成  一 一对应关系提交

框架:选择开源框架booststrap,直接进入官网会有详细教程,基础的html、css、javascript,必须要知道,否则没基础的人根本看不懂。还...

不用框架:不用框架相对写起来比较麻烦,因为很多代码都需要自己去写了,这里面涉及了css3的知识,手机端适配无非就是根据电脑和手机

一、使用 meta viewport ，在head标签内部加入以下代码，改代码的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放

width=device-width  让当前viewport的宽度等于设备的宽度
user-scalable=no     禁止用户缩放
initial-scale=1.0        设置页面初识缩放值为不缩放
maximum-scale=1.0 允许用户缩放最大值为1.0
minimum-scale=1.0  允许用户缩放最小值为1.01234567

二、媒体查询（响应式）
格式一：

@media () and () {}     //满足 () 内的提交，就会执行 {} 里的样式

eg:
123456789101112131415161718192021222324252627282930

格式二：

1

注意点：
1、link会下载好引入的 style.css 文件，但是否生效取决于是否满足 media 的条件
2、可以通过添加多个 style.css 文件来满足不同屏幕宽度的需求

三、动态 rem 方案
原理：布局排版都用rem做单位，然后不同宽度的屏，js动态计算根节点的font-size。

在页面中加入下面的代码：

[removed]
    var pageWidth = window.innerWidth;
    [removed]('');
[removed]1234

现在，根元素 html 的 font-size 的大小为 页面的宽度 pageWidth 。
也就是说： 现在 ，1 rem === html 的 font-size === pageWidth。

因此，就可以利用 rem 来动态的控制页面的大小。

通过站长平台提交适配规则或者是url适配都是可以实现的