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 ...
随机推荐
- swift-Xcode7.x(7.1,7.2,7.3)新建playground运行不能运行
swift-Xcode7.xhtml, body {overflow-x: initial !important;}.CodeMirror { height: auto; } .CodeMirror- ...
- CSS一个元素同时使用多个类选择器(class selector)
CSS类选择器参考手册 一个元素同时使用多个类选择器 CSS中类选择器用点号表示.实际项目中一个div元素为了能被多个样式表匹配到(样式复用),通常div的class中由好几段组成,如<div ...
- 【Unity】使用JSONObject解析Json
为何要用JSONObject 之前已经用过JsonUtility和Newton.Json来解析Json了,为什么现在又要用一个新的JSONObject来解析Json? 使用JsonUtility:ht ...
- FallbackFactory启动的时候抛出异常
在Hystrix做熔断的时候,开始用的是FallBack,后来为了找出为啥exception,然后就用了FallBackFactory. 但是奇怪的是,一起动就抛出异常,真的是百思不得骑姐,错了其解. ...
- <【彼得林奇 投资选股智慧全集】>读书笔记
书在这里 投资公司而不是投资股市 好公司的股票迟早会有良好的表现 构建投资组合,降低投资风险 股票只是表象,上市公司才是实质,你要做的,就是搞清楚企业状况 要投资与企业,而不是投机于股市 评价股票的价 ...
- Linxu 安装Nignx
http://www.myhack58.com/Article/sort099/sort0102/2014/44894.htm 1.为了追加 nginx 的 yum 仓库,需要创建一个文件 /etc/ ...
- Go Revel - Results(响应)
每个`Action`必须返回一个`revel.Result`实例,用来处理响应.它遵循了简单的接口: type Result interface { Apply(req *Request, resp ...
- Android——修改Button样式,动态修改Button中的图片大小
原文地址: http://www.cnblogs.com/gzggyy/archive/2013/05/17/3083218.html http://www.xuebuyuan.com/2173740 ...
- Android——音乐播放器完善——进度条显示当前播放进度,加可拖动进度条(未待解决完问题)
效果: 问题:可拖动进度条随进度条移动时,会致使音乐卡顿(待解决) xml <?xml version="1.0" encoding="utf-8"?&g ...
- Android——远程存储器存储:JDK方式和Volley框架的get和post
注意:要搭建好环境,运行 用volley方法时要把包导入project下的模块下的libs目录下 package com.example.chenshuai.myapplication; import ...