标签：知识点 dpr lib 像素 540 宽度 flexible event 设备

目标：解决移动端界面适配问题

观点：一、不同像素比的设备上的文字呈现出来的大小应该是一致的 

         二、ios设备的设备像素比分为1，2；android设备的设备像素比都为1

         三、以540为基准宽度，以width/10为根源素fontsize

         四、图片采用2x以上的

解决方案：

        一：将1/dpr设置为缩放比例且body上的fontsize设置为12*dpr，这样就能保证字体在不同设备像素比的设备字体一致

        二：都是经验之谈，减少不必要的工作量

        三：这个540其实是个经验值，或者最大值，这个经验是怎么得出来的呢？
目前主流手机最大的css像素尺寸，是540（比如devicePixelRatio为2，分辨率是1080x1920的手机），所以用了这个经验值。这样可以让在ipad横屏这种情况下浏览无线页面，不至于因为拉伸适配后体验太差。
换句话说，这个540像素值是手机屏幕能到达的最大宽度（在考虑dpr以后），如果有宽度超过540的情况，则说明该网页被显示在 dpr超过1的大屏安卓机、ipad、PC端上。这时候，就使用540这个宽度（代码里是dpr*540，除了iPhone不会有dpr超过1的情况出现，所以基本上就是540）作为默认宽度。然后将屏幕宽度除以10作为rem值（模拟vw/vh实现），应用在document元素上，并且将计算得到的rem值输出到全局变量以供调用。

       四：由于ios端dpr的值为2所以物理像素/css像素的值为2，意味者1个css占据一4个物理像素，一个CSS像素点实际分成了四个，这样就造成了颜色只能近似选取，于是，我们看上去就变得模糊了，反之位图图像质量是由单位长度内像素的多少来决定的。单位长度内像素越多，分辨率越高，图像的效果越好，所以要采用2x以上的图片。

其他：设置user-scalable=no在手机浏览器上面并不能生效，webview可以生效

         脚本禁止用户手动缩放：

document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1)event.preventDefault();
}, false);
var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
    var now = (new Date()).getTime();
    if (now - lastTouchEnd <= 300)event.preventDefault();
    lastTouchEnd = now;
}, false);

标签：知识点,dpr,lib,像素,540,宽度,flexible,event,设备
来源： https://www.cnblogs.com/zale-blogs/p/12426599.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。