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


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 相关文章推荐
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
JS模拟实现哈希表及应用详解
May 04 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 Javascript
推荐几个不错的console调试技巧实现
Dec 20 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 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
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
Yii分页用法实例详解
2014/12/04 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
浅谈Python中的闭包
2015/07/08 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
印度购物网站:TATA CLiQ
2017/11/23 全球购物
计算机应用专业推荐信
2013/11/13 职场文书
试用期员工考核制度
2014/01/22 职场文书
人事部岗位职责范本
2014/03/05 职场文书
搞笑婚前保证书
2015/02/28 职场文书
民事起诉书范本
2015/05/19 职场文书