[翻译]如何建立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需要注意以下几点。

1. 不要使用绝对宽度如width:960px; 可以用相对宽度代替如widht:100%;
2. 不要使用float元素浮动，iphone中的内容都是按行显示的
3. 禁用自动字体调整，将  -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，为每个元素边界设定一定空隙，为的是让用户使用触摸屏时不至于误点击。

4. 所有的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