首页 > 手机分辨率和响应式设计的问题

手机分辨率和响应式设计的问题

1、小米手机的分辨率是720x1280,我按这个分辨率来调整页面CSS,但用手机浏览器打开,几乎是它的分辨率的一半来显示的。为什么会这样?如果我用phonegap之后封装起来,会按我调试的显示还是按手机浏览器那样显示?那么我该以什么分辨率为参照测试?
2、手机端的响应式设计到底该有怎样的参照?需要注意些什么?


不知道你有没有用 chrome类似的浏览器, 按下F12 的时候 ,有一个 移动设备视图,可以调整网页分辨率,用来调试自己的网页样式。
响应式布局,我用的比较多的是 bootstrap,不知道你有没有用过!


iPhone6 plus的分辨率是1242x2208 你要做个1242宽的网页吗?
Note4的分辨率是1440x2560 你再做个1440宽的网页吗?
Note5据说是4K屏 ...
考虑到人眼识别能力有限 估计你要把字体放大到3~5倍才能看清 ...

手机屏幕就那么大点儿 但分辨率却千差万别 有没有统一的单位衡量尺寸呢?
有的 就是dppx 既在显示时根据dpi(像素/英寸)转换成px 这样人眼在不同设备上看是一样大的
是不是很nice? 但其实这是个坑!!! 千万别用!!!

通用的做法是用meta标签定义viewport

<meta name="viewport" content="width=device-width, ...">

其实手机厂商会根据手机屏幕大小把浏览器的宽设置为350px,420px或450px
只要引用上面的标签即可使用
也可以直接指定宽度 比如:400px

<meta name="viewport" content="width=400, ...">
【热门文章】
【热门文章】