(function(document) {
var dcl = document.documentElement, wh;
var scale = 1/window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
function setRootRem() {
wh = dcl.clientHeight;
dcl.style.fontSize = 100 * (wh / 1334) + 'px';
} setRootRem();
document.addEventListener('DOMContentLoaded', setRootRem, false);
window.addEventListener('resize', setRootRem, false);
})(document);

但是这样会导致在iphone6时输出document.documentElement.clientWidth为750.与传统获取为375不符合。

移动端适配1px问题的更多相关文章

  1. css移动端适配 1px边框的解决方案

    .border{ width: 100px; height: 100px; position: relative; } //加上媒体查询更严谨一些 dpr为2的设配才进行缩放,dpr为1的设备边框就是 ...

  2. 从flexible.js引入高德地图谈起的移动端适配

    曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...

  3. Web移动端适配总结

    移动端适配的相关概念以及几种方案总结 适配相关概念 布局视口(layout viewport):html元素的上一级容器即顶级容器,用于解决页面在手机上显示的问题.大部分移动设备都将这个视口分辨率设置 ...

  4. 小tips:使用rem+vw实现简单的移动端适配

    首先设置meta属性,如下代码: <meta name="viewport" content="width=device-width, initial-scale= ...

  5. 移动端适配--flexible.js

    引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...

  6. 移动端适配之sprite雪碧图背景定位

    移动端适配一般我会使用rem进行适配,大致操作就是按照一定尺寸设计稿进行制作,最后将所有px值转换为rem,但是一些手机背景精灵图(cssSprite)就会出现一些误差(1px左右),如果公司要求不高 ...

  7. 移动端适配之雪碧图(sprite)背景图片定位

    为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top ...

  8. 手淘H5移动端适配方案flexible源码分析

    移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...

  9. 解决vue移动端适配问题

    1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小.所以不用px; 根字体:字体的大小px; px:你就当成cm(厘米)这样的东西吧: 基 ...

随机推荐

  1. EF添加和修改

    (1)//添加操作 public bool addDate() { try { //声明上下文 a_context = new AEntities(); //声明数据模型实体 //执行代码时候会先验证 ...

  2. shell 别名alias

    在这说下 shell   命令 alias 别名   看个人爱好 设置. 直接执行命令  显示当前所有别名 alias  别名='新的别名'  该命令在当窗口关闭以后 会失效  想要永久生效  需要在 ...

  3. Stream01 定义、迭代、操作、惰性求值、创建流、并行流、收集器、stream运行机制

    1 Stream Stream 是 Java 8 提供的一系列对可迭代元素处理的优化方案,使用 Stream 可以大大减少代码量,提高代码的可读性并且使代码更易并行. 2 迭代 2.1 需求 随机创建 ...

  4. JSP页面使用EL表达式出现的问题:javax.el.PropertyNotFoundException: Property 'ID' not found on type java.lang.Str

    问题描述: 1. 后台返回到JSP前台的的list,在jsp页面使用EL表达式遍历时出现如下问题:javax.el.PropertyNotFoundException: Property 'ID' n ...

  5. java日期和时间转换字符

    日期和时间转换字符 字符 描述 例子 c 完整的日期和时间 Mon May 04 09:51:52 CDT 2009 F ISO 8601 格式日期 2004-02-09 D U.S. 格式日期 (月 ...

  6. GridSearchCV scoring 参考

    http://scikit-learn.org/stable/modules/model_evaluation.html Scoring parameter: Model-evaluation too ...

  7. Python3 Scrapy + Selenium + 阿布云爬取拉钩网学习笔记

    1 需求分析 想要一个能爬取拉钩网职位详情页的爬虫,来获取详情页内的公司名称.职位名称.薪资待遇.学历要求.岗位需求等信息.该爬虫能够通过配置搜索职位关键字和搜索城市来爬取不同城市的不同职位详情信息, ...

  8. Python 函数习题

    #encoding=utf-8 from urllib.request import urlopen import random import os ''' 1. 定义一个fuc(url, folde ...

  9. LightOJ 1038 Race to 1 Again (概率DP,记忆化搜索)

    题意:给定一个数 n,然后每次除以他的一个因数,如果除到1则结束,问期望是多少. 析:概率DP,可以用记忆公搜索来做,dp[i] = 1/m*sum(dp[j] + 1) + 1/m * (dp[i] ...

  10. 2张图简单分析count(0)与count(*)

    以前一直以为count(0)查询效率比count(*)比较高,原因大概是这么认为count(0)只是第一列进行统计,而count(*)所有列放在一起统计(亲,不要误会,这里不是所有列累加哦) 结果真的 ...