<div>
<p><span>使用说明</span></p>
<hr noshade size="1">
<div>说明文字</div>
<hr noshade size="1">
<form method="POST">
<input type="button" value="确认"
>
</form>
</div>
③启动动画（在 javascript 定义的函数中）
复制代码 代码如下:
function pHelp()
{
layerH.style.visibility = 'visible'
layerH.style.cssText = "-webkit-animation-delay: " + Math.random() + "ms"
layerH.className = 'sZoom'
}
(这个启动函数就很好理解了。但是为什么要使用-webkit-animation-delay 这句呢？因为当一个元素过渡显示完成后，若其样式没有变化，下一次将无法进行过渡动画显示。我们巧妙的利用其动画延迟时间定义，使其有所变化，就避免了上述问题。其中使用随机数函数Math.random()，产生一个大于0 小于1 的随机数。当然，延迟零点几毫秒，用户是不会察觉的。)
补充：
1. 锁定 viewport
复制代码 代码如下:
ontouchmove="event.preventDefault()" //锁定viewport，任何屏幕操作不移动用户界面（弹出键盘除外）。
2. 被点击元素的外观变化，可以使用样式来设定：
复制代码 代码如下:
-webkit-tap-highlight-color: 颜色
3. 侦测iPhone/iPod
开发特定设备的移动网站，首先要做的就是设备侦测了。下面是使用Javascript侦测iPhone/iPod的UA，然后转向到专属的URL。
复制代码 代码如下:
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) {
window.location = "http://m.example.com";
}
}
虽然Javascript是可以在水果设备上运行的，但是用户还是可以禁用。它也会造成客户端刷新和额外的数据传输，所以下面是服务器端侦测和转向：
复制代码 代码如下:
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
header('Location: ');
exit();
}
4. 阻止旋转屏幕时自动调整字体大小
复制代码 代码如下:
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
5. iPhone才识别的CSS
如果不想设备侦测，可以用CSS媒体查询来专为iPhone/iPod定义样式。
复制代码 代码如下:
@media screen and (max-device-width: 480px) {}
6. 缩小图片
网站的大图通常宽度都超过480像素，如果用前面的代码限制了缩放，这些图片在iPhone版显示显然会超过屏幕。好在iPhone机能还够，我们可以用CSS让iPhone自动将大图片缩小显示。
复制代码 代码如下:
@media screen and (max-device-width: 480px){
img{max-width:100%;height:auto;}
}
7. 模拟:hover伪类
因为iPhone并没有鼠标指针，所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript：
复制代码 代码如下:
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增加hover效果：
复制代码 代码如下:
a:hover, a.hover { /* 你的hover效果 */ }
这样设计一个链接，感觉可以更像按钮。并且，这个模拟可以用在任何元素上。
您可能感兴趣的文章: