手机友好模板

Question

我正在尝试创建一个移动友好的网站，但我似乎无法让我的基本模板正确。

http://jsfiddle.net/dvQqb/

模板必须是全屏，但不是所有的文字必须是小的，如我的HTC感觉（手机）显示器。 所以它需要有100％的宽度，但不一定要像缩小它一样。

Answer 1

默认情况下，移动浏览器通常会假设它正在加载专为大屏幕设计的页面，因此会进行尺寸假设，然后缩小整个文档。

要告诉你，你的目标是自己的屏幕尺寸的手机浏览器，你需要添加视口元标记信息：

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

Answer 2

一个伟大的地方，开始是html5 Mobile Boilerplate。

为什么它是真棒

• 跨平台兼容（Android装置，iOS，黑莓，塞班）
• CSS类针对IE Mobile 7的
• 主屏幕上的图标（Android，iOS设备Symbian）
• 针对Opera Mobile，Android，iOS，IE，Nokia，Blackberry的跨浏览器视口优化。
• 优化的视口缩放（Opera移动，Android，iOS设备的移动IE浏览器，黑莓）
• 选项来启用iOS启动屏幕在全屏模式下
• 更好的字体渲染上IE移动
• 适应性标记和CSS骨架
• CSS样式表低端设备
• 移动站点地图
• 移动MIME类型支持
• 生成用于移动
0123工具
• 修复iPhone回流扩展错误