UECSS.COM » wap

UECSS.COM » wap http://uecss.com 专注前端开发，关注用户体验，记录成长历程 Thu, 12 Jan 2012 02:11:41 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 (X)HTML Strict 下的嵌套规则 http://uecss.com/x-html-strict-rules-under-the-nested.html http://uecss.com/x-html-strict-rules-under-the-nested.html#comments Mon, 25 Apr 2011 02:06:35 +0000 猪的明天 http://uecss.com/?p=1373 周末在搜寻有关IPTV的前端资源，真心的少（国内的），三屛的需要手机端的资源顺路带过来，之前仅有过两个WAP站点的工作经验，对于《(X)HTML Strict 下的嵌套规则》记录收藏如下：

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

下面是一份在 HTML 4 Strict 和 XHTML 1.0 Strict 下必须遵守的标签嵌套规则，比如你不能在 <a> 里面再嵌入一个 <a> 这样的约定。

说明：

为了方便读者阅读，本文中的标签使用了大写（根据 XHTML 的规则，元素名必须小写，比如 <html> 而不应是 <HTML>）
小写的单词表明一组或一系列 HTML 标签
每一项条目（标签）后都跟随一组标签列表，如果没有这个列表，那么表明该条目（标签）内部不允许包含任何标签。这意味着该条目内部只能包含纯文本内容（#PCDATA，见下文）。如果注明 (empty)，这意味着该条目内部不允许包含任何形式的内容。对于 flow，inline，block，OBJECT 和 BODY，其内部允许包含的内容在文中会单独给出。
#PCDATA 的意思是“parsed character data”，即纯文本内容（不包括任何 HTML 标签，但是转义内容可以存在，比如 ä和 ä）
CDATA 的意思是“character data”，这意味着不包括转义内容的纯文本内容，详细内容可以参考CDATA Confusion
excluding … 意即不得直接或者间接的包含所列的元素

注1. 以上内容基于 [HTML 4.01 Specification] 的 Strict DTD。JunChen 翻译自 Allowed nesting of elements in HTML 4 Strict (and XHTML 1.0 Strict)

注2. 对于 XHTML 1.0，基本上一致，不同点如下：

对于 <script> 和 <style> 的内容，在 HTML 4 里是 CDATA 而在 XHTML 里是 #PCDATA
在 XHTML 中，<table> 标签后可以紧跟一个 <tr>，而在 HTML 4.01 里，不允许这样，不过 <tbody> 标签又是可以省略的。意思就是说，如果代码中的 <table> 后紧跟 <tr>，对于 HTML 4.01，会隐性的生成一个 <tbody> 标签，而在 XHTML 里面就没有。这会影响到样式表使用 tbody 作为选择器。

源：http://www.junchenwu.com/2007/01/allowed_nesting_of_elements_in_html_4_strict_and_xhtml_10_strict.html

]]> http://uecss.com/x-html-strict-rules-under-the-nested.html/feed 5 iphone/ipad网站开发技巧整理 http://uecss.com/iphone-ipad-web-development-skills.html http://uecss.com/iphone-ipad-web-development-skills.html#comments Sun, 06 Jun 2010 04:57:55 +0000 猪的明天 http://uecss.com/?p=518

iphone/ipad异常刚猛，在此把收集到的一些开发技巧罗列出来,方便项目中参考使用,如下：

侦测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: http://yoursite.com/iphone');
exit();
}

设置viewpoint和屏幕等宽

如果不设置viewpoint，网站在viewpoint就会显示成缩略形式。如果你专门为iPhone/iPod开发网站，这一条很有用，而且很简单，只需要插入到head里就可以：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

使用iPhone规格图标

如果你的用户将你的网站添加到home screen，iPhone会使用网站的缩略图作为图标。然而你可以提供一个自己设计的图标，这样当然更好。图片是57×57大小，png格式。不需要自己做圆角和反光，系统会自动完成这些工作。然后将下面这条加入head中：

<rel="apple-touch-icon" href="images/youricon.png"/>

阻止旋转屏幕时自动调整字体大小

-webkit-text-size-adjust是webkit的私有css：

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

侦测设备旋转方向

iPhone可以在横屏状态下浏览网页，有时候你会想知道用户设备的手持状态来增强可用性和功能。下面一段Javascript可以判断出设备向哪个方向旋转，并且替换css：

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才识别的CSS

如果不想设备侦测，可以用CSS媒体查询来专为iPhone/iPod定义样式。

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

缩小图片

网站的大图通常宽度都超过480像素，如果用前面的代码限制了缩放，这些图片在iPhone版显示显然会超过屏幕。好在iPhone机能还够，我们可以用CSS让iPhone自动将大图片缩小显示。

@media screen and (max-device-width: 480px){
img{max-width:100%;height:auto;}
}

注意如果原图片非常大，或一个页面非常多图，最好还是在服务器端缩放到480像素宽，iPhone只需要在正常浏览时缩略到320像素。这样不会消耗太多流量和机能。

默认隐藏工具栏

iPhone的浏览器工具栏会在页面最顶端，卷动网页后才隐藏。这样在加载网页完成后显得很浪费空间，特别是横向屏幕时。我们可以让它自动卷动上去。

window.addEventListener('load', function() {
setTimeout(scrollTo, 0, 0, 1);
}, false);

使用特殊链接

这两条不用说了吧：

<a href="tel:12345654321">打电话给我</a>
<a href="sms:12345654321">发短信</a>

模拟: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效果 */ }

这样设计一个链接，感觉可以更像按钮。并且，这个模拟可以用在任何元素上。

iphone fixed positioning

关于漂浮定位，测试后发现 { position: fixed; } 不能为其用，
可以改为 { position:absolute; } 来实现，可以使用iphone看下DEMO：iphone-fixed-positioning

参考资料：

iPhone CSS—tips for building iPhone websites

iPhone & iPod Detection Using Javascript

iPhone Development: 12 Tips To Get You Started

Tutorial: Building a website for the iPhone

hover pseudoclass for the iPhone

fixed-positioning-on-mobile-safari

Preparing Your Web Content for iPad

]]> http://uecss.com/iphone-ipad-web-development-skills.html/feed 0 WPtouch iPhone Theme http://uecss.com/wptouch-iphone-theme.html http://uecss.com/wptouch-iphone-theme.html#comments Sun, 31 Jan 2010 12:23:03 +0000 猪的明天 http://uecss.com/?p=149 WPtouch iPhone Theme这款wp插件是专门为iPhone或iPod Touch用户而开发的，新的界面主题，兼容性良好，用你的iphone iPod Touch 这些玩意儿访问本站（手机浏览器输入UECSS.COM）即可，下图是俺的水货iphone截屏快照（home+锁屏键）：

附上官方下载地址：点击这里进入下载页面

]]> http://uecss.com/wptouch-iphone-theme.html/feed 2