移动页面自适应手机屏幕宽度
关于移动页面自适应手机屏幕宽度的一点总结【站在巨人的肩膀上】
使用meta标签
最常用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。
标签如下
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
解释
content中的“width” 这个width指的是什么宽度?
有几个选择:
- 列表内容
- 虚拟窗口的宽度
- 手机屏幕的宽度
- 页面的宽度
根据我的试验得这个指的是虚拟窗口的宽度。了解宽度之后,对后续的各种scale,就应该知道是谁与谁的比例。
是虚拟窗口宽度 / 页面宽度
这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸,当然有些浏览器会自动缩放使其适应屏幕,但这不是统一标准,正确的做法是用js动态生成此标签,当然,应该先获取屏幕尺寸。
需要注意的点
1:user-scalable=no就一定可以保证页面不可以缩放吗?NO,有些浏览器不吃这一套,还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。
2:initial-scale=1.0 初始缩放比例受user-scalable控制吗?不一定,有些浏览器会将user-scalable理解为用户手动缩放,如果user-scalable=no,initial-scale将无法生效。
3:手机页面可以触摸移动,但是如果有需要禁止此操作,就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。
4:如果页面是经过缩小适应屏幕宽度的,会出现一个问题,当文本框被激活(获取焦点)时,页面会放大至原来尺寸。
以上是使用viewport标签的一些小体会,分享给大家。
2、百分比法,首先应明确一个概念,CSS中的百分比中的百指的是什么,我告诉你指的是父元素,所有百分比都是这样的。子元素宽度50%,那么父元素的宽度就是百,子元素的padding-left:50%,父元素的宽度是百,子元素的margin-top:20%,那么父元素的高是百。所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。
3、使用css3单位rem,有人这样解释rem【root-em】,就是根部的em,想必em大家都懂的,那么rem就是将根节点html的font-size的值作为整个页面的基准尺寸,默认html的font-size是16px,即1rem=16px,如果某div宽度为32px你可以设为2rem。
当我们把html的font-size设为20px时,1rem=20px,那么32px=1.6rem了。到这里我们也就了解了rem的用法了。
那么怎么用rem来实现不同尺寸屏幕的自适应呢?
在页面载入开始时首先判断window的宽度(是window的宽度($(window).width()),不是屏幕分辩率的宽度(screen.width),两者的差别请自行查阅)。
假设宽度为W,一个div在宽度为640px的设计稿的下的宽度为dW1,这样如果html的font-size为100px,那么这个div的宽度用rem表示是多少呢?计算:div宽度dW2=dW1/100。
px与rem之间很好换算,除以100就可以。
这是假定屏幕宽度为640的,而不同宽度的屏幕怎么处理,为了能保证换算容易那就要为html设置一个合适的font-size。
计算:
100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4;
为什么把100作为一个缩放比例,用10或1不是更方便吗,这是因为大多数浏览器font-size的最小值为12px,所以只能用100了。
5、媒体查询,媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生,媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等,比如我们要为宽度小于480px的页面中的class=”icon”的元素设置样式,可以这样写,@media screen and (max-width=480px) {.icon{ some styles }};
移动页面自适应手机屏幕宽度相关推荐
- 移动端H5页面自适应手机屏幕宽度
https://www.cnblogs.com/yzadd/p/6437664.html 移动端H5页面自适应手机屏幕宽度 1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点 ...
- 移动页面自适应手机屏幕宽度HTML5开发
网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设 ...
- h5页面自适应手机屏幕宽度
在html head中添加: <script type="text/javascript"> var phoneScale = parseInt(window.scre ...
- Webview--如何让加载进来的页面自适应手机屏幕分辨率居中显示
让Webview加载的页面居中显示有我知道的俩种方法 第一种: [java] WebSettings settings = webView.getSettings(); settings.setL ...
- h5实现网页内容跟随窗口大小移动_HTML5使用四种方法实现移动页面自适应手机屏幕的方法总结...
这篇文章主要介绍了HTML5 移动页面自适应手机屏幕四类方法总结,非常具有实用价值,需要的朋友可以参考下 1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标 ...
- Webview--如何让加载进来的页面自适应手机屏幕分辨率
让Webview加载的页面居中显示有我知道的俩种方法 第一种: [java] view plaincopy WebSettings settings = webView.getSettings(); ...
- 安卓+ios系统--手机端页面自适应手机屏幕大小,禁止手动放大和缩小VUE
项目需求 手机端,页面自适应手机屏幕大小,不能手动放大和缩小. 1.代码 在index.html中加入下面的代码: <!-- 手机端页面自适应手机大小,禁止手动放大 --> <met ...
- HTML5 实现图片宽度自适应手机屏幕宽度的CSS
HTML5实现图片自适应手机屏幕页面的css. HTML5写手机页面,读取图片,如果图片大于手机屏幕的宽度,就显示100%屏幕,如果小于,就显示原图. CSS的max-width就能实现了,切不要设置 ...
- 移动页面HTML5自适应手机屏幕宽度几种办法
http://www.mamicode.com/info-detail-864013.html 标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方 ...
最新文章
- python生成dat文件_Ra-使用Python脚本生成shape.dat文件
- redis setnx 分布式锁_Spring Boot 整合 Redis 正确的实现分布式锁
- 戴尔5598安装系统流程
- 【Linux】一步一步学Linux——dpkg-trigger命令(276)
- 基于ChipSmith的逆向(反向)模拟IC设计流程
- 4号团队-团队任务5:项目总结会
- Maven Gradle 区别
- java工程师什么城市就业_热门城市的Java薪资情况
- 易语言基于HTML(网页)开发软件界面UI的方法
- 常用win10优化工具(后续继续更新)
- PPP项目群管理模式的实践探索——以浙江交工富阳PPP项目群为例
- 阿里巴巴字体图标库使用及更新方法
- Codeforces Round #727 (Div. 2) A~D题
- 实战ATTCK攻击链路--靶场Writeup(三)
- 是的,你的AI技能正在“贬值”
- 数字摄影测量之特征点提取算法
- 中国站立桨板桨市场趋势报告、技术动态创新及市场预测
- 如何使用Erdas进行去霾处理
- Python入门实例验证及结果之实例7 圆周率的计算 ##程序循环结构 ##random库
- mac搜索文件为什么啥都搜不出来?
热门文章
- Android 如何利用WebView组件套壳APP
- android横向瀑布流布局,ReCyclerView实现瀑布流布局
- java中switch用法举例范围_Java中Switch用法代码示例
- java code formatter_IDEA插件配置之Eclipse Code Formatter
- npm与npx的概念
- python程序设计教程杨年华_Python程序设计教程
- 华为荣耀鸿蒙os系统,华为没有放弃荣耀!鸿蒙OS系统再次放出大招:老花粉们有福气了...
- 苹果手机相册怎么分类_手机相册照片误删了怎么办? 5年前的照片就这么轻而易举的恢复了!...
- 美国服务器安全吗?如何进行安全检测和使用?
- python怎么爬网站视频教程_python爬虫爬取某网站视频的示例代码