HTML5 移动页面自适应手机屏幕宽度详解
作者:lqh 发布时间:2022-08-14 23:14:43
网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方。
1、使用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动态生成此标签,当然,应该先获取屏幕尺寸。
<script type="text/javascript">
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)){
var version = parseFloat(RegExp.$1);
if(version>2.3){
document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘);
}else{
document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘);
}
} else {
document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘);
}
</script>
对于此标签还有以下需要分享:
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标签的一些小体会,分享给大家。
3、百分比法,首先应明确一个概年,CSS中的百分比中的百指的是什么,我告诉你指的是父元素,所有百分比都是这样的。子元素宽度50%,那么父元素的宽度就是百,子元素的padding-left:50%,父元素的宽度是百,子元素的margin-top:20%,那么父元素的高是百。所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。
4、使用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了。所以会在头部加上这个JS代码
<script type="text/javascript">
var html = document.querySelector(‘html‘);
var rem = html.offsetWidth / 6.4;
html.style.fontSize = rem + "px";
</script>
5、媒体查询,媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生,媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等,比如我们要为宽度小于480px的页面中的class="icon"的元素设置样式,可以这样写,@media screen and (max-width=480px) {.icon{ some styles }};这里仅介绍这种思路,关于媒体查询的详细用法请参阅css手册。
综上,至今,我没有找到一种完全适应各种屏幕的方法,只能根据页面特点选择不同的方法,多种方法灵活运用,才是王道。
通过此文,希望能帮助大家解决HTML5 自适应手机屏幕宽度的问题,谢谢大家对本站的支持!
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 问题描述 windows错误安装方法:pip3 install numpy这种情况下虽然安装成功,但是在import numpy时会出现如下
- 代码如下:< % '功能:显示数据库中表名、字段名、字段内容 '原创:wangsdong
- 引入numpy已经能够帮助我们处理数据,能够结合matplotlib解决我们数据分析的问题,那么pandas学习的目的在什么地方呢? num
- 《页面表达常用方式》是整个“web交互设计方法”中的一部分:设计师在设计页面时,应该在页面上建立许多视觉层次,引导用户的视觉焦点。把用户的注
- __str__和__repr__的异同?字符串的表示形式我们都知道,Python的内置函数repr()能够把对象用字符串的形式表达出来,方便
- 今天群友提出一个问题:给出Word示例如下:对于这种嵌入文件在Word中都属于ole文件。下面我们假设需要读取每个嵌入的Excel文件中的p
- 最近做opencv项目时,使用肤色分割的方法检测目标物体时,背景带来的干扰非常让人头痛。于是先将背景分割出去,将影响降低甚至消除。由于初次接
- DW2004的中文乱码情况你遇到过么?乱码一般是怎么出现的呢?也许很多时候用其他软件(比如Editplus)写程序的时候,忘了meta标签里
- threading用于提供线程相关的操作,线程是应用程序中工作的最小单元。python当前版本的多线程库没有实现优先级、线程组,线程也不能被
- Jupyter是一个在线的代码编辑工具,想要调用本地的文件则需要切换路径到相应的文件路径下切换路径要在打开Jupyter之前完成操作:cd
- 调整形状 调整形状 reshape, resize, flatten
- 请问如何使用CDONTS组件来发送电子邮件?我们可以在IIS4下使用CDONTS来完成。首先要确认是否安装了SMTP服务(OPTIONPAC
- 创建项目和应用django-admin startproject zqxt_views(项目名)cd zqxt_viewspython ma
- 目录一 列表二 集合三 字典总结一 列表# 列表:包含0个或多个对象引用的有序队列,用中括号[]表示# 增加 a = [] a.append
- 模拟栈Stack() 创建一个空的新栈。 它不需要参数,并返回一个空栈。push(item)将一个新项添加到栈的顶部。它需要 item 做参
- 在国内外大中型数据库管理系统中,把ORACLE作为数据库管理平台的用户比较多。RACLE 不论是数据库管理能力还是安全性都是无可非
- JavaScript是一门OOP,而有些人说,JavaScript是基于对象的。1) 如何创建对象:1. 使用constructor,例如:
- 一.python读取txt文件最简单的open函数:# -*- coding: utf-8 -*-with open("test.
- 本文实例讲述了Python基于递归算法实现的汉诺塔与Fibonacci数列。分享给大家供大家参考,具体如下:这里我们通过2个例子,学习pyt
- 本文实例讲述了Python递归遍历列表及输出的实现方法。分享给大家供大家参考。具体实现方法如下:def dp(s): if is