[]请问我发布网页,在苹果手机上访问,变的很模糊,分辨率为实际苹果手机的分辨率的一半,为320*480,请问怎么解决?

已邀请:

cuixueying

赞同来自:

@babybamboo
  问题一:在苹果手机上访问,分辨率为实际苹果手机分辨率的一半???
  解答:这是关于iPhone6/6Plus分辨率及图片分辨率的有关问题,希望下面的文章可以帮助到你。
  问题二:发布网页,在苹果手机上访问,变的很模糊
  解答:请详细一下信息,出现模糊的情况是只在苹果手机上还是所有的手机上都会出现这个问题
<meta name="viewport" content="user-scalable=no,target-densitydpi=device-dpi" />
在你的h5文件夹下的html文件内添加此行代码,该方法是解决手机端显示的模糊问题!!!
 
关于iPhone6/6Plus分辨率及图片分辨率的问题(一)
   iPhone 6, 6 Plus一出,给iOS开发者带来了更加头痛的屏幕适配问题。以前的iPhone 5相对于iPhone4仅仅是屏幕增高一些,现在宽高都变了。
   首先我们先了解一下屏幕物理分辨率(暂且这么称呼)与显示分辨率的区别。物理分辨率就是屏幕的宽高像素数。和屏幕大小是完全成正比的。iPhone大小有3.5寸,4.0寸,4.7寸,5.5寸,物理分辨率的宽度分别是320,320,375,414,也就是我们看到的屏幕大小就是物理分辨率大小,屏幕越宽,物理分辨率也越大。可以想象成物理宽度。显示分辨率,就是说在这块屏幕上面能够以最佳效果显示的图片的像素大小。注意是最佳效果,也就是如果图片分辨率再小一些,就会有模糊感,分辨率再大一些,也不会增加清晰度,至少我们人类用肉眼是看不出来清晰度有提升的。这就是最佳效果,这就是屏幕的显示分辨率,可以理解为能够容纳的图片像素。有一个值可以测量二者之间的关系——PPI,百度它的意思就是,每英寸的像素数目,也就是没英寸长度所能够容纳的像素数目。长度对应物理长度,像素对应显示的图片像素。其实这里的物理分辨率就是我们开发过程中用到的坐标数字。
   比如iPhone4以前的屏幕物理分辨率和和显示分辨率都是320*480的,也就是把屏幕分成320*480个小方块,每个小方块正好可以显示长宽都是1像素的一张小图片。而且是以最佳效果显示,没有拉伸感,即使放入一张2*2的图片也不会更加清楚。这个是完全由屏幕的材料决定的。这就是@x,1倍图的由来。1倍,是显示分辨率相对于屏幕分辨率得出的一个倍数。

   从iPhone4开始,一直到iPhone6(不包括Plus),屏幕的显示效果得到了很大的提升,iPhone4物理屏幕大小没变,但是显示的图片像素长宽都提升一倍。也就是单位长度里面容纳的像素数目提升一倍,即PPI提升一倍,由原来的163提升到326。图片显示效果比原来提升明显,没有了以前的颗粒感觉。这就是所谓的Retina技术,肉眼已经区分不出来单独的像素“颗粒”。这就是@2x,2倍图的由来。2倍,在我们代码里面设置大小的一个控件,需要一张长宽都是2倍的图片来填充。

   iPhone6 Plus,这个特殊的玩意又变了(用户用上大屏是爽了,我们开发者都恨死它了吧)。如果按照以前2倍的关系。6P的物理宽度是414,那么它的显示宽度应该是828,但是科技发展到现在,各个厂商都在拼参数,苹果也不甘落后,于是引入了新的屏幕,这个新的屏幕的PPI达到了401,也就是同样宽度的屏幕已经比原来容纳的像素数又有了提升,更何况宽度也比原来宽了,这样两个因数相乘:以5为标准,(414/320)*(401/326)*640(这个是基数)约等于1018.49,接近1080。至于1080和PPI401哪个是因,哪个是果,我也不清楚,反正二者的关系就是这么个关系。也就是说6P的显示分辨率的宽度是1080,高度按比例得出1920。也就是说给一张分类率是1080*1920的图片全屏显示,就会达到最佳效果,再小会拉伸,再大也不会更加清楚(可能还会损失性能)。

   那么问题来了,6P上面到底应该用几倍的图片呢,2倍显然已经不合适了。如果是全屏的话,1080 / 320约为3.37,1080 / 375约为2.88,于是结合iPhone5和iPhone6,采用了3倍的图片。这就是@3x,3倍图的由来。

QQ图片20160201191418.png

 

要回复问题请先

商务合作
商务合作