移动端Web页面适配方案
2024-08-23 07:10:33
概念理解
viewport视口
- visual viewport 可见视口,设备屏幕的宽度 windw.innerWidth/Height
- layout viewport 布局视口,DOM宽度 document.documentElement.cliendWidth/Heig
- visual viewport = layout viewport * scale
ideal viewport 理想视口:目标是让把默认的layout viewport宽度设置为移动设备的屏幕宽度
<meta name="viewport" content="width=device-width,initial-scale=1">
width: viewport宽度
initial-scale:页面初始缩放
maximum/minimum-scale:允许用户缩放的最小/最大比例
user-scalable:yes/no是否允许用户手动缩放
像素的一些事
物理像素(physical pixel)
设备像素,设备中的最小一个物理部件。比如说,一倍屏、二倍屏(Retina)、三倍屏指的是以多少物理像素来显示一个CSS像素。Retina屏幕,一个css像素对应4个物理像素。
css像素
css像素是抽象单位,主要用在浏览器上。CSS称为设备无关的像素(device-independent pixel)简称DIPs。
早起iphone3的分辨率是320x480,retina屏幕的分辨率640x960,屏幕尺寸不变但是像素提高了一倍。这时候,一个css像素等于两个物理像素。
设备像素比dpr(device pixel ratio)
设备像素比 = 物理像素/设备独立像素 (对于retina屏的iphone,dpr = 2,即1css像素相等于2个物理像素)
viewport的scale和dpr互为倒数。
- JavaScript:window.devicePixelRatio
- CSS: -webkit-device-pixel-ration, -webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio
前端适配的相关方法:
viewport
http://caibaojian.com/mobile-responsive-example.html
https://www.cnblogs.com/2050/p/3877280.html
https://segmentfault.com/a/1190000008767416#articleHeader7
https://github.com/riskers/blog/issues/18
最新文章
- android Intent介绍
- maven操作
- window下乌龟git安装和使用
- SL4A
- Android开发之获取相册照片和获取拍照照片
- Java:过去、未来的互联网编程之王
- ZOJ Problem Set - 3861 Valid Pattern Lock(dfs)
- web HTML5 调用摄像头的代码
- Recommender Systems基于内容的推荐
- 如何在Windows系统上用抓包软件Wireshark截获iPhone等网络通讯数据
- C# XML与对象互相转换
- Java基础知识强化41:StringBuffer类之StringBuffer的反转功能
- myeclipse一些快捷键 错了或者没说到补充下
- Cocos2D v2.0至v3.x简洁转换指南(五)
- vue 绑定样式的几种方式
- python之asyncio三种应用方法
- Linux shell判断文件和文件夹是否存在(转发)
- python DBUtils 线程池 连接 Postgresql(多线程公用线程池,DB-API : psycopg2)
- day12_雷神_线程总结
- [Java初探外篇]__关于正则表达式
热门文章
- 提升JAVA代码的好“味道”
- Jquery Ajax简单封装(集中错误、请求loading处理)
- C#/.NET VS2017+ EF+SQLite.CodeFirst——真正实现CodeFirst
- .iml文件恢复
- cmd获取管理员权限等
- Java浏览器弹出下载框,多个文件导出压缩包
- React笔记01——React开发环境准备
- POJ 2449 Remmarguts&#39; Date ( 第 k 短路 &;&; A*算法 )
- 小陈现有2个任务A,B要完成,每个任务分别有若干步骤如下 一道网上没啥题解的难题(至少我是这么觉得的)
- Linux下安装Harbor 1.8.0 仓库的安装和使用(亲测)