文档章节

移动终端屏幕自适应的一点经验

learn_more
 learn_more
发布于 2014/09/27 12:13
字数 1805
阅读 546
收藏 35

1)地球人都知道采用标签:

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-    scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

    除此之外还有一个content属性 target-densitydpi= medium-dpi,device-dpi,low-dpi,high-dpi 也是会影响的,不过最好设置默认的值 medium-dpi .


2)对于采用<img>标签的图片我们必须明确它的宽高

<img style="width=200px;max-width:100%;height:200px;max-height:100%;"/>

之所以这样设置,原因是图片如果不明确设置宽高,它采用自身的宽高进行页面布局,从而打破了部分浏览器的屏幕自适应。那么我们采用width 与 max-width的目的其一是找一个最好的宽度,如果宽度无法满足,那么不能超越屏幕中设定的最大值,这样的话就不会因为图片而破坏布局了。另外,width与height一般不会同时指定,原因是图片的宽高设置其一,另一个按比例变化,所以设置二者反而适得其反。


3)页面布局时采用的宽度与高度

    对于容器我们应该采用百分比设置width,height要么写死px,要么自适应,千万不要使用百分比设置高度,原因是复杂的页面根本控制不住高度的设置。对于容器的padding border margin 不用百分比设置大小,这些调解间距的属性只是粗糙控制而已,因为不同的分辨率下就算你写死了几个像素他们给你的显示也是不一样的。对于非容器类标签当然采用像素控制,不用百分比,或者采用自适应。因为这些标签已经是显示的内容了,内容是必须在UI设计师确定好大小的。


4)文字大小

    很多人都认为采用em,相对单位,可是又有人知道吗?这个单位的计算是在父元素的基础上计算大小的,所以必须知道父元素字体的大小你才可能确定这个百分比。就因为这点,我非常不喜欢用它。页面中采用像素设置字体大小不也很好。


5)位置的设置

    总是喜欢把文字居中,把位置居中等....写多了页面就知道,居中真的还不如靠右靠左强,原因是:页面中的文字在不断变化(需求还未明确之前),然后一贯居中后发现没有达到左右对齐。为了弥补居中对齐,我往往会采用<span visibility>来控制对齐,想想这会带来多少无意义的标签啊。


6)div 还是 table

    一般大的容器我是不会使用table的,这个加载太慢,都懂的。但是小的容器就会采用,想想如果总是采用 div 去 float,你要去兼容多少浏览器啊,不同浏览器对float解析还是稍有差异的。


7)对于不同的屏幕分辨率采用不同的像素,个人觉得像我这种Java程序员真的没心思去那样写,可以接受就可以了,一个页面写那么多CSS,有点不分重点的感觉。


为了更好了解meta标签,下面是转载的内容:


下面是转载 http://my.68design.net/29551/news/14587.html 关于meta标签的真正意义

    手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口” (viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网 页的不同部分。常用的viewport布局为:<meta name="viewport" content="width=device-width,user-scalable=no" />

具体的含义是:

width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素),默认的虚拟窗口为980像素宽(目前大部分网站的标准宽度),然后按一定的比例(3:1或2:1)进行缩放。

height:和 width 相对应,指定高度。

target- densitydpi:一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi)。Android支持三种屏幕像素密度:低像素密度, 中像素密度,高像素密度。一个低像素密度的屏幕每英寸上的像素点更少,而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。

下面是 target-densitydpi 属性的 取值范围

device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。

high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。

medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大, 像素密度设备相应缩小。 这是默认的target density. 

low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。

<value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。

<meta name="viewport" content="target-densitydpi=device-dpi" />
<meta name="viewport" content="target-densitydpi=high-dpi" />
<meta name="viewport" content="target-densitydpi=medium-dpi" />
<meta name="viewport" content="target-densitydpi=low-dpi" />
<meta name="viewport" content="target-densitydpi=200" />

为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放,你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了,页面将不会缩放。相反,页面会根据当前屏幕的像素密度进行展示。在这种情形下,你还需要将viewport的 width定义为与设备的width匹配,这样你的页面就可以和屏幕相适应。

initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。

maximum-scale:允许用户缩放到的最大比例,范围从0到10.0。

minimum-scale:允许用户缩放到的最小比例,范围从0到10.0。

user-scalable:用户是否可以手动缩放,值可以是:①yes、 true允许用户缩放;②no、false不允许用户缩放,如果你将其设置为no,那么minimum-scale 和 maximum-scale都将被忽略,因为根本不可能缩放。。

所有的缩放值都必须在0.01–10的范围之内。

将这些属性设置之后放入html5 的meta属性中,即可对手机屏幕进行适应,例:

meta name="viewport"
        content="
        height = [pixel_value | device-height] ,
        width = [pixel_value | device-width ] ,
        initial-scale = float_value ,
        minimum-scale = float_value ,
        maximum-scale = float_value ,
        user-scalable = [yes | no] ,
        target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
    "
/>

下面是两个实际使用的例子:


(设置屏幕宽度为设备宽度,禁止用户手动调整缩放)

<meta name="viewport" content="width=device-width,user-scalable=no" />


(设置屏幕密度为高频,中频,低频自动缩放,禁止用户手动调整缩放)

<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>



© 著作权归作者所有

learn_more
粉丝 93
博文 240
码字总数 210196
作品 0
深圳
程序员
私信 提问
一天完成把PC网站改为自适应!原来这么简单!

网站自适应,很多人都认为是很高级需要很多时间去实现的东西,不愿意去把一个现成的网站改成自适应,宁愿单独另外做一个移动站。我之前觉得实现网站自适应,要设计很多套CSS,并且要结合jQu...

hhj187
2016/08/23
46
1
finereport普通报表的移动端自适应方案

移动端报表呈现,首先要求的是页面随手机屏幕大小自动放缩(自适应),下面给出一个普通报表中的finereport移动端自适应方案,适用于finereport 7.1之前的版本。 首先,了解一下当前我们可以...

九月你好123
2015/07/30
813
0
在多好三个月的前端开发经验

这是我的第二家实习公司,在这里实习三个月收获颇丰,总结+纪念一下 一、移动端的常用插件 Zepto.js:移动端的jquery Bug:穿透bug Fastclick.js:重写click为tap事件,解决zepto的穿透bug 开...

hyh2015
2016/08/19
85
0
百度地图API入门——(5)百度地图API的简介

在一点使用经验都没有的时候,看简介,只能有些许的知晓作用。还是在写了几个超简单程序后,再回头看,比较有意义。 1. 谁用? 百度地图API是给JavaScript开发人员使用的。 2. 兼容性呢? 说...

晨曦之光
2012/04/24
599
0
[转]手机网站开发的一些总结

手机版网站起码要实现一些基本的功能吧: 1.页面的适用性问题。对于移动终端,有不一样的分辨率与屏幕尺寸,如果还像电脑端的设计还限制网页的宽度为1003px或其他像素值,字体大小还用12px或...

长平狐
2012/06/08
193
0

没有更多内容

加载失败,请刷新页面

加载更多

【0918】正则介绍_grep

【0918】正则介绍_grep 9.1 正则介绍_grep上 9.2 grep中 9.3 grep下 一、正则介绍 正则是一串有规律的字符串,它使用单个字符串来描述或匹配一系列符合某个语法规则的字符串。 二、grep工具 ...

飞翔的竹蜻蜓
7分钟前
2
0
为什么要在网站中应用CDN加速?

1. 网页加载速度更快 在网站中使用CDN技术最直接的一个好处就是它可以加快网页的加载速度。首先,CDN加速的内容分发是基于服务器缓存的,由于CDN中缓存了不少数据,它能够给用户提供更快的页...

云漫网络Ruan
44分钟前
7
0
亚玛芬体育(Amer Sports)和信必优正式启动合作开发Movesense创新

亚玛芬体育和信必优正式启动合作开发Movesense创新,作为亚玛芬体育的完美技术搭档,信必优利用Movesense传感器技术为第三方开发移动应用和服务。 Movesense基于传感器技术和开放的API,测量...

symbiochina88
55分钟前
4
0
创龙TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA核心板规格书

SOM-TL437xF是一款广州创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA芯片设计的核心板,采用沉金无铅工艺的10层板设计,适用于高速数据采集和处理系统、汽车导航、工业自动化等领...

Tronlong创龙
56分钟前
4
0
好程序员Java学习路线分享MyBatis之线程优化

  好程序员Java学习路线分享MyBatis之线程优化,我们的项目存在大量用户同时访问的情况,那么就会出现大量线程并发访问数据库,这样会带来线程同步问题,本章我们将讨论MyBatis的线程同步问...

好程序员官方
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部