新浪微博HTML5版

微博的实现方式(rem + 小数px)

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
!function(e){var a,i=navigator.userAgent.toLowerCase(),n=document.documentElement,t=parseInt(n.clientWidth);if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)||i.indexOf("like mac os x")>0){var s=/os [\d._]*/gi,o=i.match(s);a=(o+"").replace(/[^0-9|_.]/gi,"").replace(/_/gi,".")}var r=a+"";"undefined"!=r&&r.length>0&&(a=parseInt(r),a>=8&&(375==t||667==t||320==t||568==t||480==t)?n.className="iosx2":(a>=8&&414==t||736==t)&&(n.className="iosx3")),/(Android)/i.test(navigator.userAgent)&&(n.className="android")}(window);

通过以上js,判断是1x、2x、3x的设备,然后在html根元素上设置对应的className

/* 普通屏 */
.android .lite-topbar {
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 1px;
border-left-width: 0;
border-color: transparent;
border-style: solid;
}
/* 2x屏 */
.iosx2 .lite-topbar {
border-image: none;
border-top-width: 0;
border-right-width: 0;
border-bottom-width: .5px;
border-left-width: 0;
}
/* 3x屏 */
.iosx3 .lite-topbar {
border-image: none;
border-top-width: 0;
border-right-width: 0;
border-bottom-width: .35714px;
border-left-width: 0;
}

淘宝饿了么

淘宝和饿了么的实现方式(rem + 动态修改meta)

<!-- 普通屏 -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<!-- 2x屏 -->
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
<!-- 3x屏 -->
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

由于viewport(视窗)变为原来的2x或者3x,所以html的fontSize也要随着变为原来的2x或者3x。

2x屏:原来的1dpr = 2px 当视窗变为2倍时,也就变成了 1dpr = 1px

3x屏:原来的1dpr = 3px 当视窗变为3倍时,也就变成了 1dpr = 1px

【实用】【移动端】Retain屏1px解决方案的更多相关文章

  1. 移动端触屏click点击事件延迟问题,以及tap的解决方案

    在移动端 触屏click事件虽然也会响应,但是总感觉是有延迟,一直听说click事件在手机上有200~300毫秒的延迟问题,亲自测了一下,在pc端模拟手机的话是测不出来的,但是用手机测试时发现延迟非常 ...

  2. 7种方法解决移动端Retina屏幕1px边框问题

    在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...

  3. 7种方法实现移动端Retina屏幕1px边框效果

    在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...

  4. 【转载】Web移动端Fixed布局的解决方案

    特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...

  5. 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

    现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...

  6. H5案例分享:移动端滑屏 touch事件

    移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...

  7. 移动端全屏滑动的小插件,简单,轻便,好用,只有3k swiper,myswiper,page,stage

    https://github.com/donglegend/mySwiper mySwiper 移动端全屏滑动的小插件,简单,轻便,好用,只有3k 下载 直接下载 bower install mySw ...

  8. JS案例之5——移动端触屏滑动

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  9. 压测2.0:云压测 + APM = 端到端压测解决方案

    从压力测试说起 压力测试是确立系统稳定性的一种测试方法,通常在系统正常运作范围之外进行,以考察其功能极限和隐患.与功能测试不同,压测是以软件响应速度为测试目标的,尤其是针对在较短时间内大量并发用户的访 ...

随机推荐

  1. 在thinkphp框架中使用后台传值过来的数组,在hightcart中使用数组

    js的数组是和php里面数组是不一样的,所以模板文件需要先接受,然后利用Js代码转化之后再使用,接受后台的数组有几种办法 1.后台传过来的json数组,利用Js是可以接受的,然后将json数据利用js ...

  2. maven安装、配置

    maven的安装和配置 1.将maven解压到自定义文件夹下.例如解压到如下目录(解压目录最好不要有中文字):  2:配置环境变量:一定要注意要用分号:与其他值隔开 3.在cmd中测试,验证是否安装成 ...

  3. ssh整合之二hibernate单独搭建

    1.首先我们需要去拷贝我们的hibernate所需的jar包  这里还需要加入我们C3P0的jar包,因为我们hibernate中使用的C3P0连接池 2. 编写我们的关系映射文件Customer.c ...

  4. express学习(二)—— Post()类型和中间件

    1.数据:GET.POST 2.中间件:使用.写.链式操作 GET-无需中间件 req.query POST-需要"body-parser" server.use(bodyPars ...

  5. Kafka Cached zkVersion [62] not equal to that in zookeeper, skip updating ISR (kafka.cluster.Partition) 问题分析

    我司业务Kafka集群是3节点(broker分别为10,20,30),每个Topic 3 Partition,3 Repilication的配置,早上起床突然发现所有Topic的Broker节点都变为 ...

  6. python CSRF跨站请求伪造

    python CSRF跨站请求伪造 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  7. python/数据库操作补充—模板—Session

    python/数据库操作补充—模板—Session 一.创建一个app目录 在models.py只能类进行进行创建表 class Foo: xx= 字段(数据库数据类型) 字段类型 字符串 Email ...

  8. HTML初识

    HTML初识 web服务本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) so ...

  9. 二、配置QtDesigner、PyUIC及PyRcc

    配置QtDesigner.PyUIC及PyRcc 安装完PyQt 5 及PyQt5-tools 后,则需要在Pycharm中配置QtDesigner.PyUIC及PyRcc. 配置QtDesigner ...

  10. Java:Linux上java -jar xxx.jar命令执行jar包时出现Error: Invalid or corrupt jarfile xxx.jar解决方案

    背景: 从ftp上上传jar包到linux上,之后在linux上通过ftp命令下载jar包文件,开始执行Java-jar,一直提示错误:Error: Invalid or corrupt jarfil ...