移动端适配1px问题
(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问题的更多相关文章
- css移动端适配 1px边框的解决方案
.border{ width: 100px; height: 100px; position: relative; } //加上媒体查询更严谨一些 dpr为2的设配才进行缩放,dpr为1的设备边框就是 ...
- 从flexible.js引入高德地图谈起的移动端适配
曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...
- Web移动端适配总结
移动端适配的相关概念以及几种方案总结 适配相关概念 布局视口(layout viewport):html元素的上一级容器即顶级容器,用于解决页面在手机上显示的问题.大部分移动设备都将这个视口分辨率设置 ...
- 小tips:使用rem+vw实现简单的移动端适配
首先设置meta属性,如下代码: <meta name="viewport" content="width=device-width, initial-scale= ...
- 移动端适配--flexible.js
引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...
- 移动端适配之sprite雪碧图背景定位
移动端适配一般我会使用rem进行适配,大致操作就是按照一定尺寸设计稿进行制作,最后将所有px值转换为rem,但是一些手机背景精灵图(cssSprite)就会出现一些误差(1px左右),如果公司要求不高 ...
- 移动端适配之雪碧图(sprite)背景图片定位
为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top ...
- 手淘H5移动端适配方案flexible源码分析
移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...
- 解决vue移动端适配问题
1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小.所以不用px; 根字体:字体的大小px; px:你就当成cm(厘米)这样的东西吧: 基 ...
随机推荐
- no newline at the end of file
[no newline at the end of file] 修复这个警告,在文件结尾回车一下就行了. 这么规定的初衷是,为了每一行都要以换行结束. 因为行尾的/表示连接下一行,如果一个文件最后一 ...
- mongo_1 新手之路
mongodb 进入.在bin目录下 至于安装各位自己查资料吧 .不废话了 直接上图.这种表示已经成功进入mongo 本人mongo 数据库存放地址.如有需要可以清空可以自己删除. 接下来就是 ...
- memcache 随笔
第一次用可能有很多不足的地方 以后慢慢改进. memcache 是一个简单的键/值对 是通过键和值储存信息到memcache中 ,通过特定的键请求来返回信息. 信息会无限期的保留在内存中 : ...
- Log4php使用指南
一.Log4php简介 Log4php是Log4xx系列日志组件之一,是Log4j迁移到php的版本,主要用来记录日志信息,支持多种输入目的地,包括:日志文件.日志回滚文件.数据库.日志服务器等等 ...
- CentOS 安装mongodb3.0 二进制包
1.下载mongodb因为64位系统CentOS,所以下载64位的安装包: wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.0 ...
- 专题1-MMU-lesson1-MMU功能解析
1.Memory Management Unit(存储器管理单元) 单片机与ARM在硬件体系上的一些区别:其中就有MMU的区别. 虚拟地址的使用 把p1.c复制成P2.c,把变量a改成b,再进行编译看 ...
- SpringMVC——数据转换 & 数据格式化 & 数据校验
一.数据绑定流程 1. Spring MVC 主框架将 ServletRequest 对象及目标方 法的入参实例传递给 WebDataBinderFactory 实例,以创 建 DataBinder ...
- SpringMVC——处理数据模型
Spring MVC 提供了以下几种途径输出模型数据: ModelAndView: 处理方法返回值类型为 ModelAndView时, 方法体即可通过该对象添加模型数据 Map 及 Model: 入参 ...
- (转)初试konckout+webapi简单实现增删改查
原文地址:http://www.cnblogs.com/flykai/p/3361064.html 前言 konckout.js本人也是刚刚接触,也是初学,本文的目的是使用ko和asp.net mvc ...
- 【Head First Java 读书笔记】(一)基本概念
Java的工作方式 你要做的事情就是会编写源代码 Java的程序结构 类存于源文件里面 方法存在类中 语句存于方法中 剖析类 当Java虚拟机启动执行时,它会寻找你在命令列中所指定的类,然后它会锁定像 ...