在线咨询：点击这里在线咨询(在线支持1)4EB Studio(在线支持2)

学习如何进行iPhone的网页开发

发布者:4EB Studio 发布日期:2008/08/19 分类:天兔贴士, 网页设计, 苹果新知

原文作者：James Black 原文出处：NETTUTS

该文章主要讲述了如何通过使用javascript和一些Safari移动版的特殊CSS代码来设计专供iPhone和iTouch使用的页面和样式表。而且这些网页可以根据iPhone的手持状态显示不同的方向，垂直或者水平。

准备工作

在正式开始之前，我先准备了两个psd文件作为iPhone的页面样式。我使用图形作为页面背景和页眉，当然你也可以直接使用背景颜色设计这两个部分。其余的不使用图像的部分在水平和垂直切换的时候将会得到快速的加载。你可以查看我设计好的资源，或者你可以使用你自己的。不过请切记，这些网页都是专门针对iPhone或iTouch设计的，不一定会适用于日常使用的浏览器。如果你手头没有iPhone或iTouch这两个设备，你可以从苹果的官方网站下载iPhone SDK，它包含了一个iPhone模拟器。如果你希望通过标准的浏览器预览iPhone页面或者通过有条件的注释加载iPhone CSS和HTML，请使用以下代码：

  1. <script type=“text/javascript”>
  2. var browser=navigator.userAgent.toLowerCase();
  3. var users_browser = ((browser.indexOf(‘iPhone’)!=-1);
  4. if (users_browser)
  5. {
  6. document.location.href=‘www.yourdomain.com/iphone_index.html’;
  7. }
  8. </script>
上述代码解释如下：
  • 第2行: 设置一个变量来检测使用者浏览器
  • 第3行：如果当前使用是iPhone浏览器则分类给浏览器类型一个值
  • 第4－8行：这是一个条件语句来重定向正在使用“iPhone格式页面”的用户，如果”users_browser”返回一个值的话（也就是说当前的用户正在使用iPhone或iTouch浏览页面）

下面的代码将使用html有条件注释来隐藏标准浏览器的代码。

  1. <!–#if expr=”(${HTTP_USER_AGENT} = /iPhone/)”–>
  2. <!–
  3. place iPhone code in here
  4. –>
  5. <!–#else –>
  6. <!–
  7. place standard code to be used by non iphone browser.
  8. –>
  9. <!–#endif –>

第1步：建立HTML文件

我们现在已经知道了如何让用户指向你的iPhone页面，如果他们现在正在使用iPhone或iTouch。现在，我们将开始编写iPhone的HTML页面。下面的代码是区别于常规XHTML transitional文件的最主要的地方。

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
  2. “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  4. <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
  5. <head>
  6. <meta name=“viewport” content=“width=device-width; initial-scale=1.0; maximum-scale=1.0;”>
  8. <title>My iPhone Page</title>
  10. <link rel=“apple-touch-icon” href=“images/myiphone_ico.png”/>
  11. <link rel=“StyleSheet” href=“css/iphone_portrait.css” type=“text/css”media=“screen” id=“orient_css”>
上面这段代码的意思是：
  • 第1－5行: 这是标准的1.0 XHTML Transitional Doctype，没有什么特别的地方。
  • 第6行：这行是针对iPhone和iTouch的特殊代码。它为设备的浏览器窗口设定了一个初始值。width=device-width设定了页面宽度和设备宽度相同。initial-scale设定了页面可放大倍数的初始值，maximum-scale设定了页面可以被放大的最大倍数。
  • 第9行：这行的链接目标是页面的icon图标。该图标当用户将本页作为主页的时候将会显示出来。
  • 第10行：iPhone样式表的外部链接。该样式表被定义了一个名为“orient_css”的id，可以通过javascript指向其，并且当设备的方向发生改变的时候通过改变css文件来适应布局。

第2步：创建页面布局

在加入执行方向感应的javascript功能之前，我们先继续完成剩余的HTML部分。先完成页眉的部分，然后开始进行body部分。在body元素里面，我们将添加onorientationchange=orient()代码。该代码用来实现”orient”方向感应的功能。

  1. </head>
  3. <body onorientationchange=“orient();”>
  5. <div id=“wrap”>
  6. <div id=“header”>
  7. </div>
  8. <div id=“content”>
  9. <p>This is the main content area of the page. </p>
  10. <p>Using css and javascript we can manipulate any of these divs using an alternate css file. The css files in this project are for landscape and portrait views.</p>
  11. <p>Some more filler text here to demonstrate the page.</p>
  12. </div>
  13. <div id=“bottom”>
  14. </div>
  15. </div>
  16. </body>
  17. </html>

第3步：方向感应Javascript

在页面的head部分，你需要加入以下代码：

  1. <script type=“text/javascript”>
  2. function orient()
  3. {
  4. switch(window.orientation){
  5. case 0: document.getElementById(“orient_css”).href =“css/iphone_portrait.css”;
  6. break;
  7. case -90: document.getElementById(“orient_css”).href =“css/iphone_landscape.css”;
  8. break;
  9. case 90: document.getElementById(“orient_css”).href =“css/iphone_landscape.css”;
  10. break;
  11. }
  12. window.onload = orient();
  13. </script>

switch(window.orientation)用来完成body中的norientationchange()行为。这将查看当前的旋转方向是否和”case value”相同。如果返回的值是true，那么将继续执行冒号后面的事情。window.onload()将执行当页面第一次完成加载时的方向功能。

在每一个事件值之后，我们将使用javascript指向CSS文件的链接id。根据事件值的不同，0，90，或者-90（当然还有180，但是iPhone此时不支持），代表”垂直”或者”水平”的CSS文件将会被应用于link元素中的href。0代表垂直方向，90代表按顺时针旋转的水平方向，-90代表逆时针旋转的水平方向，180即使不被支持，不过要说的是它代表翻转过来的方向。

第4步：完成CSS

我们将创建两个CSS文件，一个命名为iphone_portrait.css，另一个命名为iphone_landscape.css，前者将作为默认的链接样式表。

  1. body
  2. {
  3. background-color:#333;
  4. margin-top:-0px;
  5. margin-left:-0px;
  6. }
  7. #wrap
  8. {
  9. overflow:auto;
  10. width:320px;
  11. height:480px;
  12. }
  13. #header
  14. {
  15. background:url(../images/header.jpg);
  16. background-repeat:no-repeat;
  17. height:149px;
  18. }
  19. #content
  20. {
  21. background:url(../images/middle.jpg);
  22. background-repeat:repeat-y;
  23. margin-top:-5px;
  24. }
  25. p
  26. {
  27. margin:5px;
  28. padding-left:25px;
  29. width:270px;
  30. font-size:10px;
  31. font-family:arial,“san serif”;
  32. }
  33. #bottom
  34. {
  35. background:url(../images/bottom_corners.jpg);
  36. background-repeat:no-repeat;
  37. height:31px;
  38. margin-top:-5px;
  39. }

上面是iphone_portrait.css文件的代码，非常简单，不过还是有几点要说明一下：

  • 在”wrap”样式中使用”overflow:auto”以确保浮动元素均在wrap div内，从而保证页面的干净整齐。
  • 页面的尺寸设置为宽320，长480，以确保页面元素均在wrap div内。

下面的代码是iphone_landscape.css文件的代码。和iphone_portrait.css唯一不同的是背景图片、wrap尺寸的长宽调换以及相应的空白边改变。

  1. body
  2. {
  3. background-color:#333;
  4. margin-top:-0px;
  5. margin-left:-0px;
  6. }
  7. #wrap
  8. {
  9. overflow:auto;
  10. width:480px;
  11. height:320px;
  12. }
  13. #header
  14. {
  15. background:url(../images/l_header.jpg);
  16. background-repeat:no-repeat;
  17. height:120px;
  18. }
  19. #content
  20. {
  21. background:url(../images/l_middle.jpg);
  22. background-repeat:repeat-y;
  23. margin-top:-5px;
  24. }
  25. p
  26. {
  27. margin:5px;
  28. padding-left:25px;
  29. width:370px;
  30. font-size:10px;
  31. font-family:arial,“san serif”;
  32. }
  33. #bottom
  34. {
  35. background:url(../images/l_bottom_corners.jpg);
  36. background-repeat:no-repeat;
  37. height:37px;
  38. margin-top:-5px;
  39. }

如果你是用的是我设计的背景图像，那么你垂直方向的网页现在应该和下面这张图一样。

这是水平方向的样子，看看是否一样呢？

接下来要做什么？

现在你已经完成了一张具有iPhone和iTouch格式和样式的页面，那么接下来还可以作些什么呢？好的，如果你的页面不仅仅是一个网页，你可以尝试用Joe Hewitt来验证你的IUI。Joe Hewitt是一个框架模型，可以确保你的页面看起来更像iPhone或iTouch的原生应用程序。而且，必须切记，你需要制作3个不同的CSS文件，一个垂直的，另外两个都是水平的，一个是顺时针旋转的页面，一个是逆时针旋转的页面。好了，快点动手试试看吧。祝你好运！


发表评论