用CSS做iOS和Android样式适配

html-css017

用CSS做iOS和Android样式适配,第1张

在移动端webview渲染的时候，html标签会被自动加入一个class属性，会标识不同的设备

如：

所以，可以用来适配一些移动双端的差异场景，如适配不同高度Titlebar

不同样式：

使用样式：

在iOS设备上就会展示80px，Android设备上60px

你好

看到你的问题 我很高兴 因为你也在研究学习网页制作

整站代码我没能够弄出

但我提取了苹果的导航

复制一下代码 保存成htm格式就行了 绝对一样

(我还有一个高仿百度知道的asp 我做了两年 可以送给你 QQ：372309760)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>MAC菜单</title>

<style type="text/css">

<!--

html,body { height:100%background:#fff}

body { font:12px "宋体",Arial,sans-serifcolor:#333}

body,form,menu,dir,fieldset,blockquote,p,pre,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6 { padding:0margin:0}

ul,ol,dl { list-style:none}

#nav { width:982pxheight:38pxmargin:15px 0 0 10pxoverflow:hiddenbackground:url(http://www.codefans.net/jscss/demoimg/200911/globalnavbg.png) no-repeat}

#nav li,#nav li a { float:leftdisplay:blockwidth:117pxheight:38pxbackground:#fff}

#nav li a { width:100%text-indent:-9999pxbackground:url(http://www.codefans.net/jscss/demoimg/200911/globalnavbg.png) no-repeat 0 0}

#nav .n01 { width:118px}

#nav .n01 a:visited { background-position:0 -114px}

#nav .n01 a:hover { background-position:0 -38px}

#nav .n01 a:active { background-position:0 -76px}

#nav .n02 a:link { background-position:-118px 0}

#nav .n02 a:visited { background-position:-118px -114px}

#nav .n02 a:hover { background-position:-118px -38px}

#nav .n02 a:active { background-position:-118px -76px}

#nav .n03 a:link { background-position:-235px 0}

#nav .n03 a:visited { background-position:-235px -114px}

#nav .n03 a:hover { background-position:-235px -38px}

#nav .n03 a:active { background-position:-235px -76px}

#nav .n04 a:link { background-position:-352px 0}

#nav .n04 a:visited { background-position:-352px -114px}

#nav .n04 a:hover { background-position:-352px -38px}

#nav .n04 a:active { background-position:-352px -76px}

#nav .n05 a:link { background-position:-469px 0}

#nav .n05 a:visited { background-position:-469px -114px}

#nav .n05 a:hover { background-position:-469px -38px}

#nav .n05 a:active { background-position:-469px -76px}

#nav .n06 a:link { background-position:-586px 0}

#nav .n06 a:visited { background-position:-586px -114px}

#nav .n06 a:hover { background-position:-586px -38px}

#nav .n06 a:active { background-position:-586px -76px}

#nav .n07 a:link { background-position:-703px 0}

#nav .n07 a:visited { background-position:-703px -114px}

#nav .n07 a:hover { background-position:-703px -38px}

#nav .n07 a:active { background-position:-703px -76px}

-->

</style>

</head>

<body>

<div id="nav">

<ul>

<li class="n01"><a href="#index" title="index">index</a></li>

<li class="n02"><a href="#Store" title="Store">Store</a></li>

<li class="n03"><a href="#Mac" title="Mac">Mac</a></li>

<li class="n04"><a href="#iPod+iTunes" title="iPod + iTunes">iPod + iTunes</a></li>

<li class="n05"><a href="#iPhone" title="iPhone">iPhone</a></li>

<li class="n06"><a href="#Downloads" title="Downloads">Downloads</a></li>

<li class="n07"><a href="#Support" title="Support">Support</a></li>

</ul>

</div>

</body>

</html>