10+增加iPhone网页友好性的代码段

随着移动上网的普及,越来越多的开发者转向手机网站的开发与建设中,工欲善其事,必先利其器。这里Kainy介绍的是增加iPhone网页友好性的几个代码段:

在开发网站,你必须关注不同的浏览器,以及诸如iPhone或iPod一类的移动设备。 在本文中,让我们为您介绍十几个最有用的代码片段(JavaScript的,PHP中,的CSS等)增强iPhone友好性的网页代码,提高网站速度和效率。

区分iPhone和iPod使用的JavaScript

在开发针对iPhone和iPod Touch,我们首先要做的就是区分它们,所以我们可以运用特定的代码或样式来实现。 下面的代码片断将检测到iPhone和iPod使用JavaScript,以及这些用户重定向到一个iPhone特定网页。

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {

if (document.cookie.indexOf(“iphone_redirect=false”) == -1) {

}

}

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { if (document.cookie.indexOf(“iphone_redirect=false”) == -1) { window.location = “http://m.espn.go.com/wireless/?iphone&i=COMR"; “}}”

使用PHP区分iPhone和iPod

虽然前面的代码段设计的很巧妙,但JavaScript可能在iPhone上被禁用。 由于这个原因,您可能更愿意使用PHP,以便在所有情况下都能区分iPhone和iPod。

if(strstr($_SERVER[‘HTTP_USER_AGENT’],’iPhone’) || strstr($_SERVER[‘HTTP_USER_AGENT’],’iPod’)) {

header(‘Location: http://yoursite.com/iphone');

exit();

}

设置iPhone窗口宽度

当你碰到过这样的情况:加载iPhone网站时只有一个小点? 原因是 ,开发人员忘了定义窗口(或者不知道它的存在)。 设备的宽度=宽度 语句允许您定义的文件的宽度为具有相同的比iPhone屏幕的宽度。另外两个语句防止网页被缩小,这是有用的 , 如果你正在开发的iPhone只网站。 否则,您可以删除这些语句。
定义一个视非常简单:只要插入您的HTML文件头部分以下代码:

if(strstr($_SERVER[‘HTTP_USER_AGENT’],’iPhone’) || strstr($_SERVER[‘HTTP_USER_AGENT’],’iPod’)) {

header(‘Location: http://yoursite.com/iphone');

exit();

}

自定义iPhone网站图标

当用户进入到您的网页主屏幕,iPhone将自动使用一个图标作为您的网站截图。 但是你可以提供你自己的图标,使得自己的网站显得更加个性化。定义自定义iPhone图标非常简单:只要粘贴到 以下HTML文件 部分 。 将图像保存为57px的57px 的png 格格式文件。 您不必添加发光和角落,因为iPhone会自动生成。

<rel=”apple-touch-icon” href=”images/template/engage.png”/>

禁止Safari浏览器下 旋转iPhone时自动调整文字的大小

当您旋转的iPhone,Safari浏览器调整文字的大小。 如果由于某种原因您希望阻止这种效果,只需使用下列CSS声明。
- WebKit的文本尺寸的调整 是一个WebKit的只CSS属性 , 使您可以控制文本的调整。

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {

-webkit-text-size-adjust:none;

}

检测iPhone方向(垂直或水平)

由于iPhone允许其用户在纵向和横向模式下浏览网页,您可能需要检测浏览者正以何种模式查看您的网页。
这个JavaScript函数可以方便地检测当前iPhone方向 , 将适用于特定的CSS类 , 您可以在css中定义它的风格。 请注意 , 在这个例子中,CSS类添加到ID: _page_wrapper_ 取代了它想要的ID名称(见第24行)。

window.onload = function initialLoad() {

updateOrientation();

}

function updateOrientation(){

var contentType = “show_”;

switch(window.orientation){

case 0:

contentType += “normal”;

break;

case -90:

contentType += “right”;

break;

case 90:

contentType += “left”;

break;

case 180:

contentType += “flipped”;

break;

}

document.getElementById(“page_wrapper”).setAttribute(“class”, contentType);

}

定义iPhone / iPod专用的CSS样式

嗅探器可以是有用的,但对许多原因,这并不是用来检测浏览器的最好做法。 如果您正在寻找一个更简洁的方式为iPhoen定义CSS样式,你应该使用以下代码。 它必须在常规的CSS文件粘贴。

@media screen and (max-device-width: 480px){

/ All iPhone only CSS goes here /

}

自动为iPhone手机调整图像尺寸

在最近的网站,大多数图像高于480像素宽。 由于iPhone体积小,图像很有可能无法完整显示。
使用下面的CSS代码,你就可以自动重新尺寸为100%的网站图像。 由于该设备最大宽度为480px,图像绝不会更宽。

@media screen and (max-device-width: 480px){

img{

max-width:100%;

height:auto;

}

}

自动隐藏工具栏

在小屏幕上,如iPhone屏幕上,工具栏有时是有用的,但也浪费了大量的空间。 如果您想让Safari浏览器工具栏默认情况下隐藏,使用以下JavaScript代码。

window.addEventListener(‘load’, function() {

setTimeout(scrollTo, 0, 0, 1);

}, false);

特殊链接的使用

你还记得几年前“mailto”一类链接是非常普遍的? 此前缀自动打开默认的电子邮件客户端的人。 iPhone已经推出了两款类似的前缀,tel 和

sms,这也许这将是对你有用。 你唯一要做执行这一点,是要粘贴以下的任何地方您的HTML网页。

<a href=”tel:12345678900”>Call me</a>

<a href=”sms:12345678900”>Send me a text</a>

鼠标手:hover伪类

由于iPhone上不用鼠标:悬停的CSS伪类中不使用鼠标。 然而,使用一些JavaScript您可以模拟:hover伪类,当用户指向链接时变为手指。

var myLinks = document.getElementsByTagName(‘a’);

for(var i = 0; i < myLinks.length; i++){

myLinks[i].addEventListener(‘touchstart’, function(){this.className = “hover”;}, false);

myLinks[i].addEventListener(‘touchend’, function(){this.className = “”;}, false);

}

添加以上的代码到网页文档后,就可以开始CSS样式:

a:hover, a.hover {

/ whatever your hover effect is /

}.

分享到:

评论完整模式加载中...如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理