（1）国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核。兼容移动端主流浏览器，处理Webkit内核浏览器即可。
（2）视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。
布局视口：一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期PC端页面在手机上显示的问题。IOS,Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小。
视觉视口：是用户正在看到的网站的区域
理想视口：为了使网站在移动端有最理想的浏览和阅读宽度而设定。需要手动填写meta视口标签通知浏览器操作，meta视口标签的主要目的：布局视口的宽度应该和理想视口宽度一致。
（3）meta视口标签：
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
width:宽度设置的是viewport宽度，可以设置device-width特殊值
user-scalable=no 不允许用户缩放
initial-scale=1.0，初始缩放比例，大于0的数字
maximum-scale=1.0，最大缩放比例，大于0的数字
initial-scale=1.0，初始缩放比例
标准的viewport设置：视口宽度和设备保持一致，视口默认缩放比例1.0，不允许用户自行缩放，最大允许缩放比例1.0，最小允许缩放比例1.0
（4）二倍图：
物理像素：（分辨率）物理像素点指的是显示屏幕最小颗粒，是物理真实存在的。这是厂商在出场时就设置好了，比如苹果6、7、8是750*1334，在开发时1px不一定等于一个物理像素，PC端1px等于1个物理像素，但是移动端就不尽相同。
物理像素比（屏幕像素比）：1px能显示的物理像素点的个数。
如果需要一个50*50像素的图片，直接放到iphone8里面会放大两倍，100*100就会模糊，如果采取一个100*100的图片，然后手动把这个图片缩小为50*50，准备的图片比实际大2倍，这方式就是2倍图。
(5）背景缩放：
background-size:500px 200px; 如果只写一个参数肯定是宽度，高度等比例缩放，也可以写百分比
background-size:cover; cover要完全覆盖div盒子，可能有部分背景图片显示不全。
background-size:contain; 宽度和高度等比例拉伸，当宽度或者高度铺满div盒子就不再进行拉伸了，可能有部分空白区域
（6）移动端开发选择：
单独制作移动端页面（主流）：通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面
响应式页面兼容移动端（其次）：如三星，通过判断屏幕宽度来改变样式，以适应不同终端，缺点：制作麻烦，需要花很大精力去调兼容性问题
移动端技术解决方案：
1、移动端浏览器基本以webkit内核为主，可以放心使用H5和CSS3样式。
2、CSS初始化 normalize.css
3、CSS3盒子模型 box-sizing
传统模式宽度计算：盒子宽度=CSS中设置的width+border+padding
CSS3盒子模型：盒子宽度=CSS中设置的宽度width里面包含了border和padding，也就是说CSS3中的盒子模型，padding和border不会撑大盒子
box-sizing:border-box; 有了这句话就让盒子变成CSS3盒子模型，移动端可以全部使用CSS3盒子模型
4、特殊样式
点击高亮我们需要清除，设置为transparent完成透明 -webkit-tap-highlight-color:transparent;
在移动端浏览器默认的外观在ios上加上这个属性才可以给按钮和输入框自定义样式： -webkit-apperance:none;
禁用长按页面时的弹出菜单：img,a{ -webkit-touch-callout:none; }
（7）移动端常见布局
移动端技术选型：
1、单独制作移动页面：
流式布局
flex弹性布局
less+rem+媒体查询布局
混合布局
2、响应式页面兼容移动端：
媒体查询
bootstarp
（8）流式布局（百分比布局）
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素限制，内容向两侧填充，流式布局方式是移动web开发使用比较常见的布局方式
max-width 最大宽度（max-height最大高度）
min-width 最小宽度（min-height最小高度）
（9）图片格式：DPG图片压缩技术：京东自主研发推出DPG图片压缩技术，可以直接节省用户近50%的浏览浏览，极大提升用户的网页打开速度。
webp图片格式：谷歌开发的一种旨在加快图片加载速度的图片格式，图片压缩体积大概只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间