码迷,mamicode.com
首页 > 移动开发 > 详细

移动开发

时间:2020-07-03 19:52:41      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:网站   oid   scala   span   最小   max   min   css   ide   

 移动端浏览器主要针对webkit内核进行兼容

视口 viewport

浏览器显示页面内容的屏幕区域。可分为 布局视口、视觉视口、理想视口。

布局视口 layout viewport

iOS、Android将这个布局视口分辨率一般设置为980px

视觉视口 visual viewport

用户正在看到的网站区域 

理想视口 ideal viewport

为了使网站在移动端有最理想的浏览和阅读而设定的宽度,需手动设置meta视口标签,布局视口的宽度应该与理想视口的宽度一致,即手机屏幕有多宽,布局视口就设置多宽

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maxium-scale=1.0,minium-scale=1.0" />

 物理像素/物理像素比

物理像素:屏幕显示的最小颗粒,是物理真实存在的。厂商出厂时就设置好(即分辨率),例:iphone6是750*1334

PC端1px等于1物理像素,但移动端并不一定。

一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比。

Retina视网膜屏幕是一种显示技术,可以将更多的物理像素点压缩到一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度。

 二倍图

例:一个css像素为 50px*50px的图片,放到iphone8中显示(物理像素比为2.0),那么图片会被放大为 100*100物理像素显示,那么图片会出现失真情况。

解决:准备一个css像素为100px*100px的图片,通过设置图片大小50px*50px,放到iphone8被放大2倍即100*100物理像素,仍然能保持不失真。

 

移动开发

标签:网站   oid   scala   span   最小   max   min   css   ide   

原文地址:https://www.cnblogs.com/tab15/p/13232227.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!