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

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

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

  }

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

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

(0)

相关推荐

  • HTML5 移动页面自适应手机屏幕宽度详解

    网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. 首先解释该标签的含义: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, max

  • 微信小程序 图片等比例缩放(图片自适应屏幕)

    微信小程序 图片等比例缩放 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏幕宽.我之前在做Android的时候也会遇到图片等比例缩放的问题.应该是用图片宽高比和屏幕宽高比做判断.做个笔记. 老规矩,先上图. 1.图片高宽比小于屏幕高宽比 2.图片高宽比大于屏幕高宽比 3.这种其实也是图片高宽比小于屏幕高宽比,但是高宽都大于屏幕高宽.所以不能简单用高宽来判断,应该是用高宽比判断后做缩放. 上代码: 1.index.wxml <!--index.wxml--> <

  • JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法

    在jQuery EasyUI中,如果直接在form上布局时当窗口大小调整布局不会改变,将布局应用于body时中间隔着一个form,横竖不好弄. 网上有多个解决方案,一般都是写代码,在窗口大小改变时设置布局. 经实验,新版本的JQuery EasyUI中布局可以采用以下方式来达到自动适应大小: 首先设置样式,使html和body高度为100%(因form和div高度设置为100%需要继承上级): <style type="text/css"> html,body { heig

  • jQuery自适应轮播图插件Swiper用法示例

    本文实例讲述了jQuery自适应轮播图插件Swiper用法.分享给大家供大家参考,具体如下: 运行效果截图如下: 示例代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca

  • jQuery简单实现iframe的高度根据页面内容自适应的方法

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#iframeId").load(function () { var mainheight = $(this).contents().find("body").height() + 30; $(this).height(mainheight); }); 方式2: //注意:下面的代码

  • jQuery实现布局高宽自适应的简单实例

    在页面布局(layout)时经常是上左右的框架布局并且需要宽.高度的自适应,div+css是无法实现(*hegz: div+css其实是可以实现的,利用jQuery比较容易实现浏览器的兼容性),所以需要js来辅助. 主要通过 jQuery.resize() 这个方法,也就是当窗口大小改变时重新计算布局的高宽.其它直接看代码即可. Html代码 <div id="header"></div> <div id="left"></

  • BootStrap table表格插件自适应固定表头(超好用)

    首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦) ps:这个是插件的官网,里面有英文api和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 还有,使用前请引入b

  • EasyUI布局 高度自适应

    最近在把以前写的一个项目改成用easyui做前端.过程中遇到了不少问题.其中一个就是datagrid不能很好的布局.想了好多办法都有局限.最后想到会不会是布局的问题,经过实践,最后问题解决. 1:比如在项目中用到了datagrid.如果界面比较简单---只有一个datagrid只需要把它的属性fit 设置为true就能实现自动适应窗体.如果在datagrid上方还有其他div的话,datagrid就不能很好的自动适应窗体.如查datagrid有分页控件,分页控件就看不到了.这个时候就应该用 ea

  • iOS Webview自适应实际内容高度的4种方法详解

    //第一种方法 - (void)webViewDidFinishLoad:(UIWebView *)webView { CGFloat webViewHeight=[webView.scrollView contentSize].height; CGRect newFrame = webView.frame; newFrame.size.height = webViewHeight; webView.frame = newFrame; _webTablewView.contentSize = C

  • 4种Android屏幕自适应解决方案

    Android支持多屏幕机制即用为当前设备屏幕提供一种合适的方式来共同管理并解析应用资源.本文就介绍了4中Android屏幕自适应解决方案. 一.细说layout_weight 目前最为推荐的Android多屏幕自适应解决方案. 该属性的作用是决定控件在其父布局中的显示权重,一般用于线性布局中.其值越小,则对应的layout_width或layout_height的优先级就越高,一般横向布局中,决定的是layout_width的优先级:纵向布局中,决定的是layout_height的优先级. 传

随机推荐