[翻译]如何建立iphone专用网站-iphone css 设计提示
iphone4上市后,虽然广受诟病,但不得不承认老乔的苹果确实卖的很好,手机平台的网络应用也备受关注。作为一个独立博客网站,是不是也应该让自己的博客支持手机浏览呢?答案是肯定的!
iphone上的Safari浏览器使用的是webkit核心,我们可以基于此建立许多基于css3的酷玩意儿;下面的文章介绍了一些关于iphone客户端website&css设计的基本内容,作为新手入门还是不错的。
原文:http://csswizardry.com/2010/01/iphone-css-tips-for-building-iphone-websites/
入门
在iphone上设计网页和设计打印样式表(print stylesheet)非常相似。页面是竖排版的,所有内容均按行显示,不允许分栏;我们在普通web网站上的2栏、3栏的样式设计估计是派不上用场了^_^。
用php判断用户在使用iphone浏览网站
使用iphone上网的客户会在$_SERVER['HTTP_USER_AGENT']中显示iphone….,我们可以做如下判断:
<?php $browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone"); if ($browser == true){ $browser = 'iphone'; } ?>
在后面的代码中我们可以这样写:
<?php if($browser == 'iphone'){ ?> 这些文字只会出现在iPhone中 <?php } ?>
桌面图标
当然,我们希望我们的网页可以被放在safari的收藏夹里,更希望我们的网站在主屏的圆角高光图标里也能占有一席之地。嗯,用户可以选择把我们的网站放在主屏上,可是呢,你会发现——名字老长老长,而且没有图标。
添加如下php代码可以为iphone设计一个独立的标题
<?php if($browser == 'iphone'){ ?> <title>Short iPhone only title</title> <?php }else{ ?> <title>Regular title</title> <?php } ?>
如何制作桌面图标
这再简单不过了,制作一张57X57像素的png图片上传到你的网站根目录下,为图片命名 apple-touch-icon.png iphone会自动找到这张图片并保存起来~我们的桌面图片也就有了^_^
禁止用户缩放网页
既然是为iphone专用的网页,之前的字体、页面已经设计好;不希望用户再缩小或放大,我们可以在head中放置特殊的meta标记做到这点:
<?php if($browser == 'iphone'){ ?> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> <?php } ?>
开始设计CSS样式
你可以为iphone设计一个全新的网站,如:m.your-domain.com。这样的做法可能比较费时、费力。比较折中的做法是为已有的样式表(stylesheet)添加一部分代码以供iphone使用。
首先,需要确定link中不包含media属性
<link rel="stylesheet" type="text/css" href="/path/to/style.css" />
在样式表中增加如下内容
/*--- Main CSS here ---*/ /*------------------------------------*\ IPHONE \*------------------------------------*/ @media screen and (max-device-width: 480px){ /*--- iPhone only CSS here ---*/ }
注意事项:
为iphone设计css需要注意以下几点。
- 不要使用绝对宽度如width:960px; 可以用相对宽度代替如widht:100%;
- 不要使用float元素浮动,iphone中的内容都是按行显示的
- 禁用自动字体调整,将 -webkit-text-size-adjust设置为none
/*--- Main CSS here ---*/ /*------------------------------------*\ IPHONE \*------------------------------------*/ @media screen and (max-device-width: 480px){ body{ -webkit-text-size-adjust:none; font-family:Helvetica, Arial, Verdana, sans-serif; padding:5px; } } 在上面的代码中,我设置了padding,为每个元素边界设定一定空隙,为的是让用户使用触摸屏时不至于误点击。
- 所有的div元素都应当设置width:100%;
iphone上的网页布局设计
接下来的布局设计就像上面提到的那样,移除所有float元素、设置div的width:100%
@media screen and (max-device-width: 480px){ body{...} div{ clear:both!important; display:block!important; width:100%!important; float:none!important; margin:0!important; padding:0!important; } }
网站导航
@media screen and (max-device-width: 480px){ body{...} div{...} #nav,#nav li{ float:none!important; clear:both!important; margin:0 0 20px 0!important; display:block; padding:0; text-align:left!important; width:100%; } #nav{ border:1px solid #ccc; padding:5px; -webkit-border-radius:5px; } #nav li{ margin:0!important; } #nav li a{ display:block; } }
图片
@media screen and (max-device-width: 480px){ body{...} div{...} #nav,#nav li{...} img{ max-width:100%; height:auto; } }
通过上面的介绍,相信各位对iphone网页设计应该有了基本的认识,马上去为自己的网站建立ihpone专有页面;可能有意想不到的收获哦^_^。
如果喜欢本文,欢迎转载,转载请注明出处哦~
http://www.cnphp.info/howto-build-iphone-websites-and-tips-for-iphone-css-design.html
受教了,等我买了iPhone后对照着来玩玩。呵呵~
多谢分享!!