建立网站以正确显示在智能手机上时，我应该记住哪些要点？

Question

我打算使用xhtml，css，javascript和php构建一个网站。这个网站应该正确地出现在iPhone和其他类型的智能手机上，就像它会出现在计算机上一样，所以我想知道当我开始建立这样的网站时，我应该记住哪些要点。

Answer 1

1）使用<meta name="viewport">标签正确设置规模，使您的内容填满屏幕

2）避免内部滚动，如I帧或的div overflow:scroll因为这些地方不要iOS4的工作和更早版本，或Android的

3）避免position:fixed的大多数版本的引脚导航屏幕，因为这特定部分上的iOS4不工作和更早版本，或大部分Android版本

的

4）不要依赖悬停或鼠标悬停基于下拉菜单的交互在鼠标悬停时出现，因为这些功能在基于触摸的设备上无法正常工作或根本无法正常工作

5）避免小文本或链接紧密相连，因为如果您的页面宽度为800像素且缩小到320像素，这些将很难阅读或点击。

6）不要使用闪光灯

更普遍，你有如何处理这样的选择：

1）使一个单一的网站设计有漂亮的大文本，可以在缩放时得到很好的运用到小屏幕

2）设计两种布局为您的网站和使用JavaScript或CSS媒体解析查询到移动和桌面版本之间切换样式表，或

3）做一个所谓的液体布局，其中宽度可以中平滑地缩放不同的屏幕大小，而不进行缩放

Answer 2

您应该：

1. 让你的智能手机更具体的名单。它们中有很多，基本上不可能在每个设备上创建高级互动网站，这些设备至少符合智能手机的一个定义。
2. 不断测试在设备上，即使官方模拟器不能正常工作（我相信苹果建议在设备上测试，而不是依靠他们的模拟器）。
3. 注重使用JavaScript事件，如click或hover脚本 - 他们可能对你的目标设备更为复杂（例如touchstart，touchend，touchmove仅举几例），并确保你把触摸功能的事件考虑在内。

如果你已经定义了你的目标手机，你可以检查是否例如。一些移动JavaScript框架可以满足您的需求（例如Sencha，但是我发现它至少在我测试过的一款Symbian手机型号上不起作用）。

您还应该检查兼容性表格，以显示您想要使用哪个特定功能的智能手机&浏览器。这应该为你节省很多时间。