手机设备前端设计初体验
很多时候我们的网站建设完成之后会发现，一些内容或者页面的布局在手机设备等移动设备前端上并不能良好的显示，甚至会出现页面错乱或者直接被隐藏等现象。这个时候其实就需要我们使用良好的布局来达到兼容手机移动设备的方法。本文介绍手机移动设备前端开发的几点建议，仅供初学者参考。
首先我们要知道不想电脑端的浏览器种类那么少 只有IE的几个版本以及FF、Chrome、Firefox、Safari等，在手机移动平台上开发网站的话，你需要兼容多浏览器可谓是多的数不过来。
从外部数据来看，国内浏览器品牌市场占有率前三甲为：
- Nokia(78%)
- Opera(OEM) (10%)
- iPhone(Safari) (3%)
国内的手机操作系统前三甲为：
- Nokia SymbianOS(80%)
- iPhoneOS(6%)
- SonyEricsson(5%)
当然还有一些java软件支持的类型，主要包括 UCWEB浏览器和 QQWEB 浏览器。
本文一下内容来自挨踢民工的日志，引用她的数据，仅供参考
XHTML部分
大多数手机不支持的：
- 表单元素的“disable”属性
部分手机不支持的：
- “button”标签
- “input[type=file]“标签
- “iframe”标签。
虽然只有部分手机不支持这几个标签，但因为这些标签在页面中往往具有非常重要的功能，所以属于高危标签，要谨慎使用。
少数手机不支持的：
- “select”标签：该标签如果被赋予比较复杂的CSS属性，可能会导致显示不正常，比如”vertical-align:middle”。
CSS部分
大部分手机不支持的：
- “font-family”属性：因为手机基本上只安装了宋体这一种中文字体；
- “font-family:bold;”：对中文字符无效，但一般对英文字符是有效的；
- “font-style: italic;”：同上；
- “font-size”属性：比如12px的中文和14px的中文看起来一样大，当字符大小为18px的时候你也许能看出来一些区别；
- “white-space/word-wrap”属性：无法设置强制换行，所以当你网页有很多中文的时候，需要特别关注不要让过多连写的英文字符撑开页面；
- “background-position”属性：但背景图片的其他属性设定是支持的；
- “position”属性；
- “overflow”属性；
- “display”属性；
- “min-height”和”min-weidth”属性；
部分手机不支持的：
- “height”属性：对”height”的支持不太好，奇怪的是在我们的测试当中，仅仅只有很少部分手机不支持”width”属性；
- “pading”属性
- “margin”属性：更高比例的手机不支持”margin”的负值。
少数手机不支持的：
- 少数手机对CSS完全不支持；
JavaScript部分
这部分测试相对不那么让人抓狂，要么干脆不支持，如果支持的话，对基本的dom操作、事件等支持度都还不错。但我们没有测试过很复杂的脚本。
在我们测试过的手机当中，支持（包括不完全支持）JavaScript的手机比例大约在一半左右，当然，对于我们来说，最重要的不是这个比例，而是要如何做好JavaScript的优雅降级。
其他
- 部分手机不支持png8和png24，所以尽量使用jpg和gif的图片
- 另外对于平滑的渐变等精细的图片细节，部分手机的色彩支持度并不能达到要求，所以慎用有平滑渐变的bar设计
- 部分手机对于超大图片，既不进行缩放，也不显示横下滚动条
- 少数手机在打开超过20k的测试页面时，会显示内存不足