移动页面自适应手机屏幕宽度

网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方。

1、使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

首先解释该标签的含义:

如果你完全不了解这个标签的使用需要先一下。

解释: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、第二种自适应屏幕尺寸的方法是将页面做成980宽度,在没有viewport标签的情况下,移动设备屏幕范围会显示页面980的宽度,如果页面大于980,则在屏幕范围内显示页面一部分,如果页面小于980,则页面居中两侧显示空白,那么你猜,如果页面宽度等于980会出现什么情况呢?

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了。

5、媒体查询,媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生,媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等,比如我们要为宽度小于480px的页面中的class="icon"的元素设置样式,可以这样写,@media screen and (max-width=480px) {.icon{ some styles }};这里仅介绍这种思路,关于媒体查询的详细用法请参阅css手册。

综上,至今,我没有找到一种完全适应各种屏幕的方法,只能根据页面特点选择不同的方法。

(0)

相关推荐

  • 如何让页面自适应屏幕

    随着科技的进步,互联网设备已经不再局限于电脑,而出现了平板,手机,手表等产品.作为一个前端,在制作页面的时候必须要考虑到页面适应屏幕的问题.这篇和大家分享我平常工作中是怎么处理让页面自适应屏幕的. 如 ...

  • 怎么调整华为手机内的屏幕宽度

    当我们在使用华为手机的时候,如果对于当前的屏幕宽度不满意的话,应如何进行调整呢?接下来就由小编来告诉大家.具体如下:1. 第一步,打开手机并在桌面找到设置图标,点击进入.2. 第二步,进入设置页面后, ...

  • excel如何能够在有限的屏幕宽度内浏览更多的数据呢?

    Excel图表数据最给人最大的感觉就是,密密麻麻,虽然有柱状图表示内容,看起来似乎清晰明了,但是看起来不够直观,尤其数据较多的时候,如何能够在有限的屏幕宽度内浏览更多的数据呢?不放让数据动起来吧! 打 ...

  • axure怎么设计手机屏幕的滚动条原型?

    axure想要设计一个手机屏幕滚动条的效果,该怎么制作呢?下面我们就来看看详细的教程. 1.我们先打开我们的axure软件,点击新建,然后将我们的手机模型拖拽进我们的axure,点击我们的“动态面板” ...

  • 安卓手机屏幕休眠时间和护眼模式设置方法

    安卓手机默认在没有任何操作的情况下,过一段时间就会进入休眠状态(即手机屏幕会自己变黑),那么如何去调整它的自动休眠时间呢?下面小编就来为大家介绍一种方法,并且在调整休眠时间的同时我们还能根据我们的需要 ...

  • 一招教你将安卓手机屏幕投屏到电脑

    在使用电脑和手机时,我们有没有想过手机屏幕其实是可以投屏到电脑上的呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 首先,打开电脑上的浏览器,在搜索框处输入"airdroid" ...

  • 手机屏幕上方VOLTE图标去除方法

    相信很多小伙伴手机屏幕上方都有一个下图所示的"VOLTE"图标,如果我们不想要该图标显示,该如何去除呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 首先,打开手机上的&qu ...

  • 一招教你将iPhone手机屏幕投屏到iPad上

    相信很多小伙伴都有在使用苹果iPhone手机,那么我们怎么将手机的屏幕投屏到iPad上呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 首先,分别打开手机和iPad上的应用商店,在其中搜索&qu ...

  • 如何将oppo r11手机屏幕投屏到电脑?

    相信很多小伙伴都有在使用oppo r11手机,如果我们想将手机屏幕投屏到电脑该怎么做呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 首先,在手机和电脑上下载安装同一个投屏工具.2. 接着,打开 ...