移动开发之自适应手机屏幕宽度


Posted in Javascript onNovember 23, 2016

移动开发之自适应手机屏幕宽度

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动态生成此标签,当然,应该先获取屏幕尺寸。

对于此标签还有以下需要分享:

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手册。

  之前介绍一篇文章是:响应式web实战总结 已经介绍了一些知识点,这里就不多介绍了;我们这边来了解下如何使用媒体查询写不同的css样式;针对响应式web设计开发,使用媒体查询来适应不同的手机屏幕样式开发时,我们需要写不同的样式,为此我们来分享下我个人开发响应式web页面的经验;针对目前手机的独立像素有320,360,384,400,还有iphone6+是414的独立像素,因此我们只需要针对目前这几种匹配即可;如下:

         1.针对手机独立像素是360 ~399等屏幕的宽度

/*

   * 但是边距 字体大小等还是安装360px来计算

   */

   @media (min-width:360px) and (max-width: 399px) {}

     2. 针对手机独立像素是320~359之间的

/* min-width:320px

   * 针对设备独立像素为320px 的css

   * min-width:320 和 max-width:359之间

   */  @media (min-width: 320px) and (max-width:359px){}

      3. 针对设备独立像素为400px以上的样式。

/*

    * 针对设备独立像素为400px,边距等等都按400px来计算

    */

   @media (min-width: 400px) and (max-width:450px){}

      4. 针对设备独立像素为640px ~ 999px的css

/* min-width:640px

    * 针对设备独立像素为640px 的css

    * min-width:640 和 max-width:999之间

    * 边距等按640px来计算

    */

   @media (min-width: 640px) and (max-width:999px){}

      5. 但是在PC端,我们为了适应PC端,所以针对宽度为1000以上也做一个显示处理。

/* 最小宽度1000样式

   *为了适应PC端 所以PC端在设计时候 默认以1000px来设计的

   */

   @media screen and (min-width:1000px) {}

一:使用rem来设置字体

       为了方便计算字体,我们来设置浏览器10px,我们都知道浏览器默认的像素是16px,因此我们需要对html{font-size:62.5%;} // 10 / 16 = 62.5%;

首先假如设计搞在移动端上是按照750px设计稿上的话,假如字体在750px下字体大小我们使用rem来写大小;那么他们的字体大小在各个独立像素下如下计算:

针对设备独立像素为640px ~ 999px的css

@media (min-width:640px) and (max-width: 999px) {

      /* 750/640 = 1.17*/

      html{font-size: 53.42%;} /*62.5% / 1.17 */

   }

   @media (min-width: 400px) and (max-width:450px){

     /* 750 / 400 = 1.875 */

     html{font-size:33.33% } /* 62.5% / 1.875 */

   }

   @media (min-width:360px) and (max-width: 399px) {

      /* 750 / 360 = 2.08 */

     html{font-size:30%}  /* 62.5% / 2.08 */

   }

   @media (min-width: 320px) and (max-width:359px){

     /* 750/320 = 2.34 */

     html{font-size: 26.7%} /* 62.5 / 2.34 */

   }

二: 针对宽度,高度,background-size, margin及padding的计算方法;

     假如在750px下的宽度是132px;高度是132px;background-size:132px 132px; margin:20px;Padding:20px;

     针对设备独立像素为640px ~ 999px的css

@media (min-width:640px) and (max-width: 999px) {

      /* 750/640 = 1.17*/

      html{font-size: 53.42%;} /*62.5% / 1.17 */

      // 下面的属性都是 本身的像素 / 1.17 得来的

     width: 112.82px;   // 132 / 1.17

     height:112.82px;   // 132 / 1.17

     background-size:112.82px 112.82px; // 132 / 1.17

     margin:17.09px;  // 20 / 1.17

     padding:17.09px; // 20 / 1.17

   }

  @media (min-width: 400px) and (max-width:450px){

     /* 750 / 400 = 1.875 */

     html{font-size:33.33% } /* 62.5% / 1.875 */

     // 下面的属性都是 本身的像素 / 1.875 得来的

     width: 70.4px;   // 132 / 1.875

     height: 70.4px;   // 132 / 1.875

     background-size: 70.4px 70.4px; // 132 / 1.875

     margin:10.67px;  // 20 / 1.875

     padding: 10.67px; // 20 / 1.875

  }

  @media (min-width:360px) and (max-width: 399px) {

     /* 750 / 360 = 2.08 */

     html{font-size:30%}  /* 62.5% / 2.08 */

     // 下面的属性都是 本身的像素 / 2.08 得来的

     width: 63.46px;   // 132 / 2.08

     height: 63.46px;   // 132 / 2.08

     background-size: 63.46px 63.46px; // 132 / 2.08

     margin:9.62px;  // 20 / 2.08

     padding: 9.62px; // 20 / 2.08

  }

  @media (min-width: 320px) and (max-width:359px){

     /* 750/320 = 2.34 */

    html{font-size: 26.7%} /* 62.5 / 2.34 */

    width: 56.41px;   // 132 / 2.34

    height: 56.41px;   // 132 / 2.34

    background-size: 56.41px 56.41px; // 132 / 2.34

    margin:8.55px;  // 20 / 2.34

    padding: 8.55px; // 20 / 2.34

  }

但是有时候在小屏幕下字体太小了,使用户看起来太吃力,我们可以针对小屏幕下适当掉大一点即可;

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
动态添加删除表格行的js实现代码
Feb 28 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
微信小程序动态显示项目倒计时
Jun 20 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
原生js实现随机点名
Jul 05 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 #Javascript
jQuery-mobile事件监听与用法详解
Nov 23 #Javascript
jquery-mobile表单的创建方法详解
Nov 23 #Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 #Javascript
浅析Node.js:DNS模块的使用
Nov 23 #Javascript
jquery-mobile基础属性与用法详解
Nov 23 #Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 #Javascript
You might like
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
php中的一个中文字符串截取函数
2007/02/14 PHP
php中Smarty模板初体验
2011/08/08 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
JS 强制设为首页的代码
2009/01/31 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
python调用API实现智能回复机器人
2018/04/10 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
急诊科护士自我鉴定
2013/10/14 职场文书
如何客观的进行自我评价
2013/12/17 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
2016年度创先争优活动总结
2016/04/05 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android