【实用】【移动端】Retain屏1px解决方案
新浪微博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解决方案的更多相关文章
- 移动端触屏click点击事件延迟问题,以及tap的解决方案
在移动端 触屏click事件虽然也会响应,但是总感觉是有延迟,一直听说click事件在手机上有200~300毫秒的延迟问题,亲自测了一下,在pc端模拟手机的话是测不出来的,但是用手机测试时发现延迟非常 ...
- 7种方法解决移动端Retina屏幕1px边框问题
在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...
- 7种方法实现移动端Retina屏幕1px边框效果
在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...
- 【转载】Web移动端Fixed布局的解决方案
特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...
- 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...
- H5案例分享:移动端滑屏 touch事件
移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...
- 移动端全屏滑动的小插件,简单,轻便,好用,只有3k swiper,myswiper,page,stage
https://github.com/donglegend/mySwiper mySwiper 移动端全屏滑动的小插件,简单,轻便,好用,只有3k 下载 直接下载 bower install mySw ...
- JS案例之5——移动端触屏滑动
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- 压测2.0:云压测 + APM = 端到端压测解决方案
从压力测试说起 压力测试是确立系统稳定性的一种测试方法,通常在系统正常运作范围之外进行,以考察其功能极限和隐患.与功能测试不同,压测是以软件响应速度为测试目标的,尤其是针对在较短时间内大量并发用户的访 ...
随机推荐
- 【learning】多项式相关(求逆、开根、除法、取模)
(首先要%miskcoo,这位dalao写的博客(这里)实在是太强啦qwq大部分多项式相关的知识都是从这位dalao博客里面学的,下面这篇东西是自己对其博客学习后的一些总结和想法,大部分是按照其博客里 ...
- ASP.NET CORE 自定义视图组件(ViewComponent)注意事项
*红色字体为固定命名,蓝色为一般命名规则,黄色为ASP.NET CORE 默认查找文件名 概要:1.简单ViewComponent的用法 2.ViewComponent控制器返回值 3.注意事项 1 ...
- Python内置函数(49)——isinstance
英文文档: isinstance(object, classinfo) Return true if the object argument is an instance of the classin ...
- python 类的绑定方法和非绑定方法
一.绑定方法 1.对象的绑定方法 首先我们明确一个知识点,凡是类中的方法或函数,默认情况下都是绑定给对象使用的.下面,我们通过实例,来慢慢解析绑定方法的应用. class People: def __ ...
- Spring Security入门(1-9)Spring Security 的xml 命名空间配置
- Object.defineProperties()和Object.defineProperty()方法
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象. 语法:Object.defineProperty(obj, pro ...
- MyBatis(一):配置并使用
MyBatis具体是什么东东,这些在后边在研究吧,本文目的是为了记录如何使用MyBatis. 首先,需要下载MyBatis开发所需要文件. 通过github上可以找到MyBatis代码:https:/ ...
- POJ-1860 Currency Exchange---Bellman-Ford判断正环
题目链接: https://vjudge.net/problem/POJ-1860 题目大意: 我们的城市有几个货币兑换点.让我们假设每一个点都只能兑换专门的两种货币.可以有几个点,专门从事相同货币兑 ...
- Win10 VS2012 无法注册IIS4.0 解决方案
死活注册不上,度娘也找了,最终找到只要打个补丁就行. 安装: Microsoft Visual Studio 2012 更新 (KB3002339) 下载:http://www.microsoft.c ...
- 用PHP如何实现这种乘法口诀表?
用PHP如何实现这种乘法口诀表? 1x1=1 ,1x2=2 ,1x3=3 ,.....,1x9=9 2x2=4 ,2x3=6 ,......,2x9=18 ........ ...... 8x8=64 ...