移动端web兼容各种分辨率写法
移动端web开发最好用rem单位,再设置以下js,以iphone6 750*1334为基准
<script>
var size = document.documentElement.clientWidth / 750 * 100;
//PC端訪問時,默認viewport為100
if (!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
size = 100;
}
document.documentElement.style.fontSize = size + 'px'; //解决iOS safari 禁用缩放无效问题
window.onload = function () {
document.addEventListener('gesturestart', function (e) {
e.preventDefault();
});
document.addEventListener('dblclick', function (e) {
e.preventDefault();
});
document.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
});
var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
};
</script>
相当于在根html元素设置了font-size:100px
html {
font-size: 100px;
}
会根据移动端尺寸大小对应改变根html的font-size,从而实现对各种屏幕大小的兼容
div {
font-size: .14rem; // 字体就被对应设置成14px
width: 2rem; // 宽度被对应设置成200px
}
移动端web兼容各种分辨率写法的更多相关文章
- ** PC端完美兼容各种分辨率的简便方法 **
原文链接:https://blog.csdn.net/qq_43156398/article/details/102785370 PS:此方法需使用到less或者scss的@变量来支持 以设计图 19 ...
- 常见的移动端Web页面问题
移动端Web需要照顾触摸操作的体验,以及更多的屏幕旋转与尺寸适配等问题,非常琐碎,在这里为大家倾力总结多条常见的移动端Web页面问题解决方案,欢迎收看收藏! 1.安卓浏览器看背景图片,有些设备会模糊 ...
- 移动端web开发的一些知识点
整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成 ...
- 【超级干货】手机移动端WEB资源整合
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...
- 手机移动端WEB资源整合
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...
- 【超级干货】手机移动端WEB资源整合:转载
转载于:http://www.w3cfuns.com/notes/24611/fbba9cbd616e795360ea45515494aa53.html meta基础知识 H5页面窗口自动调整到设备宽 ...
- 移动端web解决方案
范畴 移动端web浏览器.至少需要适配的,UC,QQ,各手机内置浏览器,chrome,safari. 是不是觉得和PC端差不多?错了!每款同一版本ios的内置浏览器一样.但每款同一版本android的 ...
- 移动端开发demo—移动端web相册(一)
本文主要是介绍开发移动端web相册这样一案例用到的前置知识. 一.移动端样式 移动端更接近手机原生的方式. 如下是一个angular mobile的demo的例子: 移动端demo做成这样的好处: 在 ...
- 手机移动端web前端常见问题整理
移动端常见问题及解决方案 一.meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="w ...
随机推荐
- kafka集群的错误处理--kafka一个节点挂了,导致消费失败
今天由于kafka集群搭建时的配置不当,由于一台主消费者挂掉(服务器崩了,需要维修),导致了所有新版消费者(新版的offset存储在kafka)都无法拉取消息. 由于是线上问题,所以是绝对不能影响用户 ...
- ubuntu14.04 安装jdk1.8及以上
安装xmind1.8 碰到jvm版本太低的错误: Version 1.7.0_131 of the JVM is not suitable for this product. Version: 1.8 ...
- Pyspider框架
1, 2,在ubuntu安装pyspider如果出现pycul的问题 首先执行命令:sudo apt-get install libssl-dev libcurl4-openssl-dev pytho ...
- Python【每日一问】06
问:简述Python文件打开模式 r. w. a. r+.w+.a+之间的区别 答: 1.只读模式 r 文件存在:只读打开,只能执行读操作 文件不存在:报错 # ######## 只读模式r #### ...
- MAC地址表、ARP缓存表以及路由表
一:MAC地址表详解 说到MAC地址表,就不得不说一下交换机的工作原理了,因为交换机是根据MAC地址表转发数据帧的.在交换机中有一张记录着局域网主机MAC地址与交换机接口的对应关系的表,交换机就是根据 ...
- Vue 封装的noData组件
<template> <div :style="{color: fontColor}" :class="['noDataView', iconType] ...
- Servlet-知识点
2018年10月05日 16:52:56 yigg 阅读数:38 1.JavaWeb开发的目录结构 https://blog.csdn.net/u012661010/article/details ...
- Laravel数据库操作 Eloquent ORM
模型首先在App目录下建立student的文件夹 里面放上 Student.php 且需要继承基类Model //允许批量赋值的字段// protected $fillable = ['name',' ...
- html2canvas html截图插件
以下我总结了一些注意事项,在代码中注释了,仅供参考. html2canvas.js点击付:完整使用的demo ,如下: <!DOCTYPE html><html lang=" ...
- LVM逻辑卷疑问?
创建完逻辑卷后,删除以/dev/vdb1和/dev/vdb2为基础的分区后,逻辑卷依然生效???