(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. DAY.15_Python

    昨天完成了三级菜单和购物车程序的作业: """ .__author__.=,"JerseyHg" 作业要求:1. 可依次选择进入到下一级菜单:2. 可 ...

  2. java基础之集合长度可变的实现原理

    首先我们要明白java中的集合Collection,List,ArrayList之间的关系: ArrayList是具体的实现类,实现了List接口 List是接口,继承了Collection接口 Li ...

  3. Linux编译提速

    一.简介 项目越来越大,重新编译整个项目是一件很费时的事,总结可以帮助提速方法,如下: 1)tmpfs: 解决IO瓶颈,充分利用本机内存资源 2)make -j: 充分利用本机计算资源 3)distc ...

  4. Vue.js组件调用用及其组件通信

    1.需要import,然后components注册.然后如下代码调用. <template> <header></header> //注册后才能这样使用 <b ...

  5. 一、office web apps 部署

    原文出处:http://www.cnblogs.com/yanweidie/p/4516164.html 原文出处:https://www.cnblogs.com/poissonnotes/p/323 ...

  6. iPhone的home键进果汁了,按起来粘粘的感觉

    解决办法是按住home键转动一下,再用棉签蘸点水或者酒精都行(注意:水不要太多,不能让水渗进去),用棉签按压home 键多转几圈就好了.

  7. (转)15个非常棒的jQuery无限滚动插件【瀑布流效果】

    原文地址:http://www.cnblogs.com/lyw0301/archive/2013/06/19/3145084.html 现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布 ...

  8. 设计模式03: Builder 生成器模式(创建型模式)

    Builder生成器模式(创建型模式) Builder模式缘起假设创建游戏中的一个房屋House设施,该房屋的构建由几个部分组成,且各个部分富于变化.如果使用最直观的设计方法,每个房屋部分的变化,都将 ...

  9. ApplicationContex是干啥的

    ApplicationContext就是一个百宝箱 ApplicationContext是Spring的核心,Context我们通常解释为上下文环境,我想用“容器”来表述它更容易理解一些,Applic ...

  10. 求整数数组(长度为n),出现大于2/n次数的数字

    条件:时间复杂度是O(n),空间复杂度是O(1) 方法1:标记法 , , , , , , , , , , , , , }; int len = arr.Length; int[] c = new in ...