移动端适配
时间:2019-12-07
本文章向大家介绍移动端适配,主要包括移动端适配使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
视口
布局视口
documnet.documentElement.clientWidth
视觉视口
document.innerWidth
适配
rem适配
/*媒体查询*/
/*布局时可能会用到*/
@media screen and (-webkit-device-pixel-ratio : 2) {
}
/*使用全局样式样式去掉*/
* {
/* y轴可以缩放,x轴不行 */
touch-action: pan-y;
}
动态设置
let style = document.createElement('style');
style.innerHTML = `html{font-size: ${document.documentElement.clientWidth / 16}px !important;}`;
document.head.appendChild(style);
// 阻止默认事件,如滚动
elem.addEventListener('touchstart', fn, { passive: false });
viewport适配
// 将所有视口的宽度调整为设计图宽度
// 需要在页面上写好 <meta name="viewport" content="width=device-width">
// 是为了获取理想视口的宽度, 如果不写这句话,布局适口默认为980
let targetWidth = 750;
let meta = document.querySelector('meta[name=viewport]');
let scale = document.documentElement.clientWidth / targetWidth;
meta.content = `initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale},user-scalable=no`;
原文地址:https://www.cnblogs.com/tujw/p/12003108.html
- COGS 144. [USACO Dec07] 魅力手镯【01背包复习】
- SQL Server 使用全文索引进行页面搜索
- HDU 1003 Max Sum【动态规划求最大子序列和详解 】
- HDU 1005 Number Sequence【多解,暴力打表,鸽巢原理】
- HDU 1019 Least Common Multiple【gcd+lcm+水+多个数的lcm】
- HDU 1017 A Mathematical Curiosity【水,坑】
- 比特币项目
- HDU 1014 Uniform Generator【GCD,水】
- 【AlphaGo Zero 核心技术-深度强化学习教程代码实战05】SARSA(λ)算法实现
- 区块链应用场景:物联网和物流供应链
- HDU 1012 u Calculate e【暴力打表,水】
- Gym 100952C&&2015 HIAST Collegiate Programming Contest C. Palindrome Again !!【字符串,模拟】
- HDU 1013 Digital Roots【字符串,水】
- Gym 100952I&&2015 HIAST Collegiate Programming Contest I. Mancala【模拟】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Windows WSL2 htop打开黑屏的问题解决
- 【DB笔试面试855】在Oracle中,简单说说PSU升级的过程
- HashMap中add()方法的源码学习
- IOC容器实现
- Docker安装mysql
- 【LeeCode 面试题】二叉树的前序遍历,中序遍历,后序遍历递归和迭代的两种实现方式
- MySQL笔记汇总
- 【DB笔试面试856】在Oracle中,如何判定实例是否运行?
- 【DB笔试面试857】在Oracle中,若一个主机上有多个Oracle实例,则如何确定哪些共享内存段属于想要清掉的实例的内存段?
- vue + flask实现邮件密码找回功能
- PicGo + Gitee 构建免费云图床
- python scipy.stats计算单样本假设检验(1 sample test)
- python scipy.stats计算双独立样本假设检验(2 sample independent test)
- 深入理解JS的事件循环
- C语言必背的18个经典程序。