PC端与移动端视口问题

一、 移动端
由于移动端得默认视口是980px（css像素）
默认情况下，移动端得像素比是 980/移动端宽度
如ip6s得宽度为750，则其像素比为980/750
因此若我们直接在网页中写移动端代码，这样在980得视口下，像素比非常不友好，即导致页面中得内容非常非常小（因此此时1css像素~1.3333066个物理像素，因此在默认情况下，对于w750px的ip6s，你设置w：900时是不能沾满整个屏幕的，因此此时的视口为980px，因此对于固定物理像素宽的手机，如何调节，使得显示效果合适呢？）
----编写移动端页面时，需要确保一个比较合理的像素比（比如正常情况下显示效果为①）
（当移动端的宽小于视口时，若使用默认的视口，①为正常效果，最终会显示②的效果
当移动端的宽大于视口时，最终会显示③的效果）

因此，通过meta标签来设置视口的大小，从而设置合理的像素比，使得页面效果正常显示

比如：

.box{ width:200px;height:200px;} 此时的视口大小设置为200px，所以box的宽会占满整个屏幕 但是实际开始时，视口大小均不是认为设置的，而是根据网站提供的最佳像素比去设置的）-----完美视口 如i6的最佳像素比为2（即x：750=1：2---x=375px），因此设置content=“width=375px”-----但不能写死，因为不同手机完美视口不一样

step：

最终设置：

-------- device-width 即完美视口，使用于各种移动端

！important：以后写移动端，一定要把这个meat标签写上

二、 解决不同设备像素比不同，带来的xxpx在不同设备上带来的不同意义效果
比如：ip6的完美视口为375
ip6plus的完美视口为414
那么设置w：100px，对于两的效果是不一样的，因此在移动开发时，就不能使用px来进行布局