有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

window.target(SEO优化干货)meta属性详解

seo 炮渣日记 1周前 (11-23) 14次浏览 已收录 0个评论 扫描二维码

meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果。

meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等。

window.target(SEO优化干货)meta属性详解

name属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类(目前几乎所有搜索引擎都使用网上机器人自动查找meta值来给网页分类)。

这其中最重要的是description(站点在搜索引擎上的描述)和keywords(分类关键词)。

meta 的属性有两种:name和http- equiv。

1、name属性

name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

meta标签的name属性语法格式是:

<meta name=”参数”content=”具体的参数值”>。

其中name属性主要有以下几种参数:

A、Keywords(关键字) 

说明:keywords用来告诉搜索引擎你网页的关键字是什么。

举例:<meta name=”keywords” content=”今日头条,头条,头条网,头条新闻,今日头条官网”>

B、description(网站内容描述)

说明:description用来告诉搜索引擎你的网站主要内容。

举例:<meta name=”description” content=”今日头条是一个通用信息平台,致力于连接人与信息,让优质丰富的信息得到高效精准的分发,促使信息创造价值。”>

C、robots(机器人向导)

说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。

content得参数有all,none,index,noindex,follow,nofollow。默认是all。

举例:<meta name=”robots”content=”none”>

具体参数如下:

信息参数为all:文件将被检索,且页面上的链接可以被查询;

信息参数为none:文件将不被检索,且页面上的链接不可以被查询;

信息参数为index:文件将被检索;

信息参数为follow:页面上的链接可以被查询;

信息参数为noindex:文件将不被检索,但页面上的链接可以被查询;

信息参数为nofollow:文件将被检索,但页面上的链接不可以被查询;

D、author(作者)

说明:标注网页的作者

举例:<meta name=”author”content=”root,root@xxxx.com”>

E、generator

<meta name=”generator”content=”信息参数”/>

meta标签的generator的信息参数,代表说明网站的采用的什么软件制作。

F、COPYRIGHT

<META NAME=”COPYRIGHT”CONTENT=”信息参数”>

meta标签的COPYRIGHT的信息参数,代表说明网站版权信息。

G、revisit-after

<META name=”revisit-after”CONTENT=”7days”>

revisit-after代表网站重访,7days代表7天,依此类推。

2、http-equiv属性

http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

meta标签的http-equiv属性语法格式是:<meta http-equiv=”参数”content=”参数变量值”>;

其中http-equiv属性主要有以下几种参数:

A、Expires(期限)

说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。

用法:<meta http-equiv=”expires”content=”Fri,12Jan200118:18:18GMT”>

注意:必须使用GMT的时间格式。

B、Pragma(cache模式)

说明:禁止浏览器从本地计算机的缓存中访问页面内容。

用法:<meta http-equiv=”Pragma”content=”no-cache”>

注意:这样设定,访问者将无法脱机浏览。

C、Refresh(刷新)

说明:自动刷新并指向新页面。

用法:<meta http-equiv=”Refresh”content=”2;URL=http://www.toutiao.com”> //(注意后面的引号,分别在秒数的前面和网址的后面)

注意:其中的2是指停留2秒钟后自动刷新到URL网址。

D、Set-Cookie(cookie设定)

说明:如果网页过期,那么存盘的cookie将被删除。

用法:<meta http-equiv=”Set-Cookie”content=”cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/”>

注意:必须使用GMT的时间格式。

E、Window-target(显示窗口的设定)

说明:强制页面在当前窗口以独立页面显示。

用法:<meta http-equiv=”Window-target”content=”_top”>

注意:用来防止别人在框架里调用自己的页面。

F、content-Type(显示字符集的设定)

说明:设定页面使用的字符集。

用法:<meta http-equiv=”content-Type”content=”text/html;charset=gb2312″>

具体如下:

meta标签的charset的信息参数如GB2312时,代表说明网站是采用的编码是简体中文;

meta标签的charset的信息参数如BIG5时,代表说明网站是采用的编码是繁体中文;

meta标签的charset的信息参数如iso-2022-jp时,代表说明网站是采用的编码是日文;

meta标签的charset的信息参数如ks_c_5601时,代表说明网站是采用的编码是韩文;

meta标签的charset的信息参数如ISO-8859-1时,代表说明网站是采用的编码是英文;

meta标签的charset的信息参数如UTF-8时,代表世界通用的语言编码;

G、content-Language(显示语言的设定)

用法:<meta http-equiv=”Content-Language”content=”zh-cn”/>

H、Cache-Control指定请求和响应遵循的缓存机制。

Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、on

ly-if-cached,响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下

Public指示响应可被任何缓存区缓存

Private指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效

no-cache指示请求或响应消息不能缓存

no-store用于防止重要的信息被无意地发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

max-age指示客户机可以接受生存期不大于指定时间(以秒为单位)的响应

min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应

max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。

J、http-equiv=”imagetoolbar”

<meta http-equiv=”imagetoolbar”content=”false”/>

指定是否显示图片工具栏,当为false代表不显示,当为true代表显示。

K、Content-Script-Type

<Meta http-equiv=”Content-Script-Type”Content=”text/javascript”>

W3C网页规范,指明页面中脚本的类型。

什么是Viewport

手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。

Viewport 基础

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。

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

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

maximum-scale:允许用户缩放到的最大比例。

minimum-scale:允许用户缩放到的最小比例。

user-scalable:用户是否可以手动缩放

< meta http-equiv = “X-UA-Compatible” content = “IE=edge,chrome=1” />

这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式(比如IE6),以此来解决部分兼容问题,例如模拟IE7的具体方式如下:

< meta http-equiv = “X-UA-Compatible” content =”IE=EmulateIE7″ />

但令我好奇的是,此处这个标记后面竟然出现了chrome这样的值,难道IE也可以模拟chrome了?

迅速搜索了一下,才明白原来不是微软增强了IE,而是谷歌做了个外挂:Google ChromeFrame(谷歌内嵌浏览器框架GCF)。这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是GoogleChrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器,谷歌这个墙角挖的真给力!

而上文提到的那个meta标记,则是在是安装了GCF后,用来指定页面使用chrome内核来渲染。

安装完成后,如果你想对某个页面使用GCF进行渲染,只需要在该页面的地址前加上 gcf: 即可,例如:gcf:http://toutiao.com

但是如果想要在开发时指定页面默认首先使用GCF进行渲染,如果未安装GCF再使用IE内核进行渲染,该如何进行呢?

就是使用这个标记。

标记用法:

下面来简单讲解一下这个标记的语法。

1.最基本的用法:在页面的头部加入

<meta http-equiv = “X-UA-Compatible” content = “chrome=1” >

用以声明当前页面用chrome内核来渲染。

复杂一些的就是本文一开始看到的用法:

<meta http-equiv = “X-UA-Compatible” content = “IE=edge,chrome=1” />

这样写可以达到的效果是如果安装了GCF,则使用GCF来渲染页面,如果为安装GCF,则使用最高版本的IE内核进行渲染。

2.通过修改HTTP头文件的方法来实现让指定的页面使用GCF内核进行渲染:

在HTTP的头文件中加入以下信息:X-UA-Compatible: chrome=1

在Apache服务器中,确保 mod_headers 和mod_setenvif文件可用,然后在httpd.conf中加入以下配置信息:

< IfModule mod_setenvif.c>

< IfModule mod_headers.c>

BrowserMatch chromeframe gcf

Header append X-UA-Compatible “chrome=1” env=gcf

</ IfModule >

</ IfModule >

在IIS7或者更高版本的服务器中,只需要修改web.config文件,添加如下信息即可即可:

< configuration >

< system.webServer >

< httpProtocol >

< customHeaders >

< add name = “X-UA-Compatible” value = “chrome=1” />

</ customHeaders >

</ httpProtocol >

</ system.webServer >

</ configuration >

移动平台的meta标签

1、Meta 之 viewport

说到移动平台meta标签,那就不得不说一下viewport了,那么什么是viewport呢?

viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域。

对于传统WEB页面来说,980的宽度在iphone上显示是很正常的,也是满屏的,但对于webapp而言,可能就有点问题了,在iphone上我们的webapp在竖屏下通常宽度都是320,这时我们320页面在iphone上显示成啥效果呢?有人可能认为iPhone不是320的宽度莫,感觉应该是满屏的吧,事实呢?我们来看一下如下布局在iPhone上的显示情况。

<html>

<head>

<meta charset=”utf-8″>

<title>Meta Viewport</title>

<style type=”text/css”>

div,body{

padding:0;

margin:0;

}

body{

padding-top:100px;

color:#fff;

}

div{

width:320px;

height:100px;

margin:0 auto;

background:#000;

text-align:center;

font:30px/100px Arial;

}

</style>

</head>

<body>

<div>

AppUE

</div>

</body>

</html>

在iPhone上显示如图:

window.target(SEO优化干货)meta属性详解

因此我们必须改变viewport,我们就有如下几种属性值可以设置:

width: viewport 的宽度 (范围从 200 到 10,000 ,默认为 980 像素 )

height: viewport 的高度 (范围从 223 到 10,000 )

initial-scale: 初始的缩放比例 (范围从>0到 10 )

minimum-scale: 允许用户缩放到的最小比例

maximum-scale: 允许用户缩放到的最大比例

user-scalable: 用户是否可以手动缩放

对于这些属性,我们可以设置其中的一个或者多个,并不需要你同时都设置,iPhone 会根据你设置的属性自动推算其他属性值,而非直接采用默认值。

如果你把initial-scale=1 ,那么 width 和 height在竖屏时自动为320*356 (不是320*480因为地址栏等都占据空间 ),横屏时自动为 480*208。类似地 ,如果你仅仅设置了 width,就会自动推算出initial-scale 以及height。例如你设置了 width=320 ,竖屏时 initial-scale就是 1 ,横屏时则变成 1.5 了。 那么到底这些设置如何让 Safari 知道 ?其实很简单 ,就一个 meta ,形如:

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

设置了meat后我们页面将如此呈现了:

window.target(SEO优化干货)meta属性详解

好了,我们就可以按全屏来布局我们的页面了,不用再担心页面显示的很小了!

2、Meta 之 format-detection

<meta name=”format-detection” content=”telephone=no”/>

你明明写的一串数字没加链接样式,而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!想去掉这个拨号链接该如何操作呢?这时我们的meta又该大显神通了,代码如下:

telephone=no 就禁止了把数字转化为拨号链接!

telephone=yes 就开启了把数字转化为拨号链接,要开启转化功能,这个meta就不用写了,在默认是情况下就是开启!

3、Meta 之
apple-mobile-web-app-capable

<meta name=”apple-mobile-web-app-capable”content=”yes” />

这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。

加了该meta的情况:

window.target(SEO优化干货)meta属性详解

4、Meta 之
apple-mobile-web-app-status-bar-style

<meta name=”apple-mobile-web-app-status-bar-style”content=”default” />

<meta name=”apple-mobile-web-app-status-bar-style”content=”black” />

<meta name=”apple-mobile-web-app-status-bar-style”content=”black-translucent” />

作用是控制状态栏显示样式

status-bar-style:black

window.target(SEO优化干货)meta属性详解

status-bar-style:black-translucent

window.target(SEO优化干货)meta属性详解

WebApp是一种新出现的基于WEB形式的类应用程序,运行在高端的移动终端设备上,其应用范围会越来越广。

开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP;一种是基于高端机的浏览器运行的WebApp,本文将主要讲解后者。

Webapp说白了就是一个针对Iphone、Android优化后的web站点,它使用的技术无非就是HTML或HTML5、CSS3、JavaScript,服务端技术JAVA、PHP、ASP。

当然,因为这些高端智能手机(Iphone、Android)的内置浏览器都是基于webkit内核的,所以在开发WEBAPP时,多数都是使用 HTML5和CSS3技术做UI布局。当使用HTML5和CSS3l做UI时,若还是遵循着一般web开发中使用HTML4和CSS2那样的开发方式的 话,这也就失去了WEBAPP的本质意义了,且有些效果也无法实现的,所以在此又回到了我们的主题–webapp的布局方式和技术。

在此所说的移动平台前端开发是指针对高端智能手机(如Iphone、Android)做站点适配也就是WebApp,并非是针对普通手机开发 Wap 2.0。

1、首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用

1 <meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;” name=”viewport” />

2 <meta content=”yes” name=”apple-mobile-web-app-capable” />

3 <meta content=”black” name=”apple-mobile-web-app-status-bar-style” />

4 <meta content=”telephone=no,email=no” name=”format-detection” />

第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;

user-scalable定义是否可缩放(0为不缩放),使页面固定设备上面的大小。

(注意:据说HTC G7自身系统浏览器不支持这一条规则,能对页面进行放大,一旦放大导致页面布局错乱,解决方法:定义页面的最小宽度 min-width,body{min-width: 300px;})

iOS 7.1的Safari为meta标签新增minimal-ui属性,在网页加载时隐藏地址栏与导航栏。<meta name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=no, minimal-ui” />

第二个meta标签是ios设备(不只iphone)中的safari私有meta标签,它表示:允许全屏模式浏览,开启对Web Aapp程序的支持。;

第三个meta标签也是ios系统的私有标签,它指定在web app状态下,ios设备中顶端的状态条的颜色; 默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。

第四个meta标签表示:使设备浏览网页时对数字不启用电话功能(不同设备解释不同,itouch点击数字为存入联系人,iphone为拨打电话),忽略将页面中的数字识别为电话号码。

若需要启用电话功能将telephone=yes即可,具体调用格式可以这样书写代码<a href=”13800138000″>Call Me</a>,若在页面上面有google maps, iTunes和youtube的链接会在ios设备上打开相应的程序组件。

2、HTML5标签的使用

在开始编写webapp时,哥建议前端工程师使用HTML5,而放弃HTML4,因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序 的体验,可以减少开发者很多的工作量,当然了你决定使用HTML5前,一定要对此非常熟悉,要知道HTML5的新标签的作用。比如定义一块内容或文章的区域 可使用section标签,定义导航条或选项卡可以直接使用nav标签等等。

3、放弃CSS float属性

在项目开发过程中可以会遇到内容排列排列显示的布局(见下图),假如你遇见这样的视觉稿,哥建议你放弃float,可以直接使用display:block;

4、利用CSS3边框背景属性

这个按钮有圆角效果,有内发光效果还有高光效果,这样的按钮使用CSS3写是无法写出来的,当然圆角可以使用CSS3来写,但高光和内发光却无法使用 CSS3编写,这个时候你不妨使用-webkit-border-image来定义这个按钮的样式。-webkit-border-image就个很复杂 的样式属性。

5、块级化a标签

请保证将每条数据都放在一个a标签中,为何这样做?因为在触控手机上,为提升用户体验,尽可能地保证用户的可点击区域较大。

6、自适应布局模式

在编写CSS时,我不建议前端工程师把容器(不管是外层容器还是内层)的宽度定死。为达到适配各种手持设备,我建议前端工程师使用自适应布局模式(支付宝 采用了自适应布局模式),因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、 chrome都能够正常地显示,你无需再次考虑设备的分辨率。

7、学会使用webkit-box

了解了自适应布局模式,有些同学可能还会问:如何在移动设备上做到完全自适应呢?很感谢webkit为display属性提供了一个webkit-box的值,它可以帮助前端工程师做到盒子模型灵活控制。

8、如何去除Android平台中对邮箱地址的识别

看过iOS webapp API的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地 址的,但在Android平台,它会自动检测邮件地址,当用户touch到这个邮件地址时,Android会弹出一个框提示用户发送邮件,如果你不想 Android自动识别页面中的邮件地址,你不妨加上这样一句meta标签在head中 1 <meta content=”email=no” name=”format-detection” />

9、如何去除iOS和Android中的输入URL的控件条

你的老板或者PD或者交互设计师可能会要求你:能否让我们的webapp更加像nativeapp,我不想让用户看见那个输入url的控件条?

答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果

1 setTimeout(scrollTo,0,0,0);

请注意,这句代码必须放在window.onload里才能够正常地工作,而且你的当前文档的内容高度必须是高于窗口的高度时,这句代码才能有效的执行。

10、如何禁止用户旋转设备

我曾经也想禁止用户旋转设备,也想实现像某些客户端那样:只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你:别想了!在移动版的webkit中做不到!

至少Apple webapp API已经说到了:我们为了让用户在safari中正常的浏览网页,我们必须保证用户的设备处于任何一个方位 时,safari都能够正常的显示网页内容(也就是自适应),所以我们禁止开发者阻止浏览器的orientationchange事件,看来苹果公司的出 发点是正确的,苹果确实不是一般的苹果。

iOS已经禁止开发者阻止orientationchange事件,那Android呢?对不起,我没有找到任何资料说Android禁止开发者阻止浏览器orientationchange事件,但是在Android平台,确实也是阻止不了的。

11、如何检测用户是通过主屏启动你的webapp

看过Apple webapp API的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能,按下 iphoneipodipod touch底部工具中的小加号,或者ipad顶部左侧的小加号,就可以将当前的页面添加到设备的主屏,在设备的主屏会自动 增加一个当前页面的启动图标,点击该启动图标就可以快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别 是它清除了浏览器上方和下方的工具条,这样你的webapp就更加像是nativeapp了,还有一个区别是window对像中的navigator子对 象的一个standalone属性。iOS中浏览器直接访问站点时,navigator.standalone为false,从主屏启动webapp 时,navigator.standalone为true, 我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访 问我们的webapp的。在Android中从来没有添加到主屏这回事!

12、如何关闭iOS中键盘自动大写

我们知道在iOS中,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为 input元素提供了autocapitalize属性,通过指定autocapitalize=”off”来关闭键盘默认首字母大写。

13、iOS中如何彻底禁止用户在新窗口打开页面

有时我们可能需要禁止用户在新窗口打开页面,我们可以使用a标签的target=”_self“来指定用户在新窗口打开,或者target属性保持空,但 是你会发现iOS的用户在这个链接的上方长按3秒钟后,iOS会弹出一个列表按钮,用户通过这些按钮仍然可以在新窗口打开页面,这样的话,开发者指定的 target属性就失效了,但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技 巧仅适用iOS对于Android平台则无效。

14、iOS中如何禁止用户保存图片\复制图片

我们在第13条技巧中提到元素的-webkit-touch-callout属性,同样为一个img标签指定-webkit-touch-callout为none也会禁止设备弹出列表按钮,这样用户就无法保存\复制你的图片了。

15、iOS中如何禁止用户选中文字

我们通过指定文字标签的-webkit-user-select属性为none便可以禁止iOS用户选中文字。

16、iOS中如何获取滚动条的值

桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的,但在iOS中你会发现这两 个属性是未定义的,为什么呢?因为在iOS中没有滚动条的概念,在Android中通过这两个属性可以正常获取到滚动条的值,那么在iOS中我们该如何获 取滚动条的值呢?

通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。

17、如何解决盒子边框溢出

当你指定了一个块级元素时,并且为其定义了边框,设置了其宽度为100%。在移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元 素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊 的样式
-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。

18、如何解决Android 2.0以下平台中圆角的问题

如果大家够细心的话,在做wap站点开发时,大家应该会发现android 2.0以下的平台中问题特别的多,比如说边框圆角这个问题吧。

在对一个元素定义圆角时,为完全兼容android 2.0以下的平台,我们必须要按照以下技巧来定义边框圆角:

1\-webkit这个前缀必须要加上(在iOS中,你可以不加,但android中一定要加);

2\如果对针对边框做样式定义,比如border:1px solid #000;那么-webkit-border-radius这属性必须要出现在border属性后。

3\假如我们有这样的视觉元素,左上角和右上角是圆角时,我们必须要先定义全局的(4个角的圆角值)-webkit-border- radius:5px;然后再依次地覆盖左下角和右下角,
-webkit-border-bottom-left-radius:0;-webkit- border-bottom-right-border:0;否则在android 2.0以下的平台中将全部显示直角,还有记住!-webkit这个前 缀一定要加上!

19、如何解决android平台中页面无法自适应

虽然你的html和css都是完全自适应的,但有一天如果你发现你的页面在android中显示的并不是自适应的时候,首先请你确认你的head标签中是否包含以下meta标签:

1 <meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;” />

如果有的话,那请你再仔细的看清楚有没有这个属性的值width=device-width,如果没有请立即加上吧!

20、如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式

新的iOS系统也就是4.3版本,升级后对safari造成了一个bug:即使你添加了如下的meta标签,safari仍然会对页面中的5位连续的数字进行自动识别,并且将其重新渲染样式,也就是说你的css对该标签是无效的。

1 <meta name=”format-detection” content=”telphone=no” />

我们可以用一个比较龌龊的办法来解决。比如说支付宝wap站点中显示金额的标签,我们都做了如下改写:

1 <button class=”t-balance”style=”background:none;padding:0;border:0;”>95009.00</button>元

21、如何检测iOS4 、iOS5或是iOS6?

iPhone 4带来的革新,retina display绝对是最吸引眼球的一项。正是依赖这视网膜显示屏,iPhone 4的分辨率达到了640×960 pixels,不过为了保持向下兼容性,它采用的仍然是320×480 points。也就是说,在不进行缩放的情况下,显示普通图片时,它会用4个像素来显示图片中的1个像素;而在显示retina图片时,每个像素都对应图片中的1个像素。

如此一来,老的应用无需修改就可以在iPhone 4上运行了——虽然显示效果差了点,但是不会出现只有左上角那1/4的区域有内容的情况。

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址