flexible.js移动端适配安卓高分辨不兼容问题
根据网上找到的解决办法,对于安卓设备,把dpr=1改为当前设备的dpr
if (!dpr && !scale) {
if (isIPhone) {
// iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下,仍旧使用1倍的方案
// dpr = 1;
// 其他设备下,改为使用设备当前的dpr
dpr = devicePixelRatio;
}
scale = 1 / dpr;
}
这时候会不会发现有些安卓机可以正常显示,有些安卓机显示样式反而特别小呢?其实有一点一定要注意,在代码中,我们可能针对不同dpr的设备设定了不同的样式,比如图片、宽高、字体大小等,这时候就要考虑到安卓可能的dpr了,否则这些针对性的样式必然会按默认的dpr=1的样式来展示的。比如下面是我默认写的font-size

目前只是测了一部分安卓机,没有出现问题,dpr=2.75 是 小米 mix,dpr=4 是三星s6 edge ,我看网上安卓应该还有dpr=1.5的情况,目前我还没遇到。所以一定要写多种方案,否则,安卓的样式真的就跪 了…………………………
这里有一片文章写的比较好,可以推荐阅读:http://blog.csdn.net/a0405221/article/details/78913714
https://www.cnblogs.com/ling-du/p/4623623.html
http://mdsa.51cto.com/art/201507/484215_2.htm
在测试过程中还发现一个问题,vivo打不开我们的手机端网站………………换任何一个浏览器都不行……
flexible.js移动端适配安卓高分辨不兼容问题的更多相关文章
- 有了这套flexible.js 移动端自适应方案,你就能在移动端的来去自如, (*^__^*)
flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...
- 手淘的flexible.js解决手机适配问题
如何使用flexible.js做手机适配 做移动端网页肯定需要做适配,以前都用的fixscreen.js,对比一下,觉得flexible.js更好吧,毕竟是大厂出的东西. 第一步要给页面加在viewp ...
- flexible.js 移动端自适应方案
一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https://github.com/amfe/ar ...
- JS移动端适配(自适应)
var html = document.querySelector('html'); changeRem(); window.addEventListener('resize', changeRem) ...
- 手淘移动适配方案flexible.js兼容bug处理
什么是flexible.js 移动端自适应方案 https://www.jianshu.com/p/04efb4a1d2f8 什么是rem 这个单位代表根元素的 font-size 大小(例如 元素的 ...
- 从flexible.js引入高德地图谈起的移动端适配
曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...
- 移动端适配--flexible.js
引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...
- 移动端适配方案 flexible.js
前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案 ...
- 移动端适配插件(flexible.js)
;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.que ...
随机推荐
- css3 data-attribute属性打造漂亮的按钮
之前介绍了几款css3实现的按钮,今天为网友来款比较新鲜的,用css3的data-attribute属性开发按钮,当鼠标经过显示按钮的详细信息.而且实现过程很简单,几行代码就搞定.大家试一试吧.如下图 ...
- 【Java笔记】配置文件java.util.Properties类的使用
配置文件的路径:项目名/src/main/resources/mmall.properties mmall.properties的内容是键值对.例如假设写了ftp服务器的一些信息. ftp.serve ...
- gulp实例
前端生产环境的简单部署http://ionichina.com/topic/558a1c1346cb5ff7268cee9d var gulp = require('gulp'); // 引入gulp ...
- linux用户和权限详解
1.用户组说明 在使用useradd命令创建用户的时侯可以用-g 和-G 指定用户所属组和附属组.基本组:如果没有指定用户组,创建用户的时候系统会默认同时创建一个和这个用户名同名的组,这个组就是基本组 ...
- 编译安装LAMP之安装Apache+php与管理(十五)
[教程主题]:编译安装LAMP之安装Apache+php与管理 [课程录制]: 创E [主要内容] [1]编译安装Apache+PHP 1.安装程序依赖库和开发环境 为了省事把所需要的库文件全都安装上 ...
- Android-FragmentPagerAdapter刷新无效的解决方案
按照通常使用ListView的习惯做法,如果你只是更新保存Fragment的List数据,然后调用adapter的notifyDataSetChanged()是不会起作用的. 搜索了下发现此问题普遍存 ...
- 9、Qt 事件处理机制
原文地址:http://mobile.51cto.com/symbian-272812.htm 在Qt中,事件被封装成一个个对象,所有的事件均继承自抽象类QEvent. 接下来依次谈谈Qt中有谁来产生 ...
- ZARM in Linux & MIUI
zram是Linux内核的一个模块,之前被称为“compcache”.zram通过在RAM内的压缩快设备上分页,直到必须使用硬盘上的交换空间,以避免在磁盘上进行分页,从而提高性能.由于zram可以用内 ...
- 实验四 使用ASP.NET内置对象 总结
这次实验内容是ASP.NET的一些内置对象的熟悉,感觉看到了上学期JSP的影子,很多地方都很像.像Response对象,Request对象,Context对象等等.以前我老是搞混Response对象和 ...
- soapui-使用groovy脚本执行用例请求
import com.eviware.soapui.impl.wsdl.testcase.WsdlTestRunContext CURRENT_TESTCASE = testRunner.testCa ...