下载此文档

自适应手机屏幕宽度.doc


文档分类:IT计算机 | 页数:约4页 举报非法文档有奖
1/4
下载提示
  • 1.该资料是网友上传的,本站提供全文预览,预览什么样,下载就什么样。
  • 2.下载该文档所得收入归上传者、原创者。
  • 3.下载的文档,不会出现我们的网址水印。
1/4 下载此文档
文档列表 文档介绍
1、使用 meta 标签,这也是普遍使用的方法, 理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。首先解释该标签的含义: <meta name="viewport" content="width=device-width,initial-scale=, minimum-scale=, maximum-scale=, user-scalable=no"/> 如果你完全不了解这个标签的使用需要先百度一下。解释: content 中的“ width ”这个 width 指的是什么宽度,我看过的文章对这个都没有解释的很清楚,有几个备选:虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等?经试验这个指的是虚拟窗口的宽度。了解宽度之后,对后续的各种 scale ,就应该知道是谁与谁的比例,是虚拟窗口宽度/ 页面宽度,这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸,当然有些浏览器会自动缩放使其适应屏幕,但这不是统一标准, 正确的做法是用 js 动态生成此标签,当然, 应该先获取屏幕尺寸。对于此标签还有以下需要分享: 1)、 user-scalable=no 就一定可以保证页面不可以缩放吗? NO , 有些浏览器不吃这一套,还有一招就是 minimum-scale=, maximum-scale= 最大与最小缩放比例都设为 就可以了。 2)、 initial-scale= 初始缩放比例受 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 的 f

自适应手机屏幕宽度 来自淘豆网m.daumloan.com转载请标明出处.

相关文档 更多>>
非法内容举报中心
文档信息
  • 页数4
  • 收藏数0 收藏
  • 顶次数0
  • 上传人luyinyzha
  • 文件大小0 KB
  • 时间2016-07-11