解决PC端和移动端的适配和兼容问题的处理方式

我们经常会看到在我们的html页面中出现了这样一行代码，

<meta name="viewport" content="width=device-width, initial-scale=1.0">

那么这行代码有什么意义呢？

第一种：可能只是简单地认识，只要加上这行代码，然后页面的宽度就会跟我的设备宽度一致。这种是比较片面的理解。

第二种：那么这一种是什么呢？让我们先往下看，答案就在其中。

先说一下单位，我们经常看到的是以像素为单位，但是也会有以百分比和rem为单位的。

那么，在写移动端页面时，经常会把iPhone 6为基础去写页面。

分辨率：1334pt x 750pt
指的是屏幕上垂直有1334个物理像素，水平有750个物理像素。

屏幕尺寸：4.7in
注意英寸是长度单位，不是面积单位。4.7英寸指的是屏幕对角线的长度，1英寸等于2.54cm。这一部分，不知道的可以去上网查看一下。

屏幕像素密度：326ppi
指的是每英寸屏幕所拥有的像素数，在显示器中，dpi=ppi。dpi强调的是每英寸多少点。同时，屏幕像素密度=分辨率/屏幕尺寸

接着，我们来看一下其他的单位。

设备独立像素：设备独立像素，不同于设备像素（物理像素），它是虚拟化的。比如说css像素，我们常说的10px其实指的就是它。需要注意的是，物理像素开发者是无法获取的，它是自然存在的一种东西，该是多少就是多少。

设备像素比：缩写简称dpr，也就是我们经常在谷歌控制台移动端调试顶端会看到的一个值。设备像素比 = 设备像素 / css像素（垂直方向或水平方向）。可以通过JS来获取：window.devicePixelRatio

PC和移动端不同的视口

注：以下涉及的像素均为CSS像素。并且默认不考虑缩放。

关于移动端适配方案：

我这里有以下几点，希望对你有所帮助。

移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。

 方案有：静态布局 流式布局 flex弹性盒子布局

静态布局：在meat标签中的viewport标签中设置width,通过js动态修改标签的initial-scale使得页面等比缩放，采用px为单位，不存在兼容问题，用户体验极差

流式布局：使用%定义宽度，高度使用px固定，通常使用max-width,和min-width来控制页面的最大宽度和最小宽度，实现很简单，但是在大屏幕手机或者切换横竖屏的模式下可能会造成元素拉伸变形字体大小无法根据屏幕大小发生变化

Flex弹性盒子布局：包裹文字的属性采用rem为单位，根据屏幕宽度设置html标签的font-size,在布局时使用rem单位布局，达到自适应的目的。优势兼容性好，页面不会伸缩发生变形，缺点：不是纯css移动适配方案，需要引入js脚本在头部嵌入一段js脚本监听分辨率的变化来改变根元素的文字大小。

这三种方案，就是解决移动端关于适配问题。

关于移动端兼容问题：

第一种是通过响应式或页面终端判断去实现一套资源适配所有终端；

第二种是通过终端判断分别调取两套资源以适配所有终端。

这两种方案不能说哪一个最好，只是能找到最适合我们的。

那就一个一个说一下：

第一种：

优点：只需维护一套资源，维护成本较低。

缺点：需加载适配各个终端的各个资源，在不同终端通过响应式布局实现不同展现，部分交互效果需要在页面中做终端判断，代价较大，若图片资源为一套，部分图片在超高分辨率设备。

选择哪个类库去实现：

第一种：使用jquery+ 响应式 + 前端模块加载器+ css预处理器（sass 或less等）。jquery较好的兼容性配合响应式可相对代价较小地实现跨终端。前端模块加载器主要负责按需加载，以提高页面加载速度，css预处理器 的变量、运算、嵌套等特性可大大提高手动计算响应式的效率，不用担心把比例算错了。

第二种：使用zepto+ 响应式 + 前端模块加载器 + css预处理器 + 终端适配。zepto作为jquery的移动端版本，依然延续其自身优势，大幅优化了移动端API且摒弃了兼容”非现代浏览器”的冗余代码，成为移动端轻 便可用的js框架代表，对于习惯了jquery的同学来说简直是不二之选！

关于PC上的网站在移动端上的问题？

 如果把移动端的可视区域(320-768)的话，大部分网站都会因为太窄而显示错乱；所以浏览器默认把viewport设置为一个较宽的值 980px或1024px，至少保证PC网站在移动端上可以显示，只不过出现了横向滚动条而已。

首先要实现屏幕适配的问题，那么就要接着说我们最开始的问题了。

meta viewport 中有6个通用属性：

• width 设置layout viewport的宽度 正整数或字符串 'width-device'
• initial-scale 设置页面的初始缩放值，数字或小数
• minimum-scale 允许用户的最小缩放值 数字或小数
• maximum-scale 允许用户的最大缩放值 数字或小数
• height 设置layout viewport 的高度，这个属性很少用到
• user-scaleabel 是否允许用户进行缩放 'no'或‘yes’ 还有2个需要特别注意的两个属性

• target-densitydpi 在andriod 4.0一下的设备中，不支持设置viewport的width，android 自带浏览器支持设置 target-densitydpi来达到目的；

需要用到的：<meta name="viewport" content="width=device-width">

 关于横竖屏切换问题：

js代码控制：

window.addEventListener("orientationchange",function () {
        This.isOrietation = true;
        This.changeOriention();
    });
//建议执行横竖屏的事件都通过一个侦听完成，做一个统一的管理；在屏幕横竖屏切换完成之后再执行相应的事件

css代码控制：

//定义横屏显示的样式
@media screen and(orientation:landspace){...}
//定义竖屏显示的样式
@media screen and(orientation:portrait){...}
//某个尺寸的特殊样式 竖屏时宽度为768px 符合一般ipad的条件
@media only screen and(orientation:portrait) and(device-width:768px){...}

 以上就是关于移动端和PC端所面对的问题了。希望对你们有多帮助，如果还有更多关于移动端的问题，请大佬给我讲解讲解。