如何建立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，为每个元素边界设定一定空隙，为的是让用户使用触摸屏时不至于误点击。

1. 所有的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网页设计应该有了基本的认识，马上去为自己的网站建立iphone专有页面；可能有意想不到的收获哦^_^。

如果喜欢本文，欢迎转载，转载请注明出处哦～

http://www.cnphp.info/howto-build-iphone-websites-and-tips-for-iphone-css-design.html