当我建立一个网站以正确地出现在智能手机上时,我应该记住哪些要点
What are the points that I should keep in mind when building a website to properly appear on smart phones?
我将使用xhtml、css、javascript和php构建一个网站。这个网站应该像出现在电脑上一样正确地出现在iPhone和其他类型的智能手机上,所以我想知道当我开始构建这样的网站时,我应该记住什么。
1)使用<meta name="viewport">
标记正确设置比例,以便您的内容填充屏幕
2) 避免内部滚动区域,如带有overflow:scroll
的iframe或div,因为这些区域在iOS4及更早版本或大多数版本的Android 上不起作用
3) 避免position:fixed
将导航定位到屏幕的特定部分,因为这在iOS4和更早版本或大多数版本的Android 上不起作用
4) 不要依赖基于悬停或滚动的交互,比如鼠标悬停时出现的下拉菜单,因为这些菜单在基于触摸的设备上工作不好或根本不起作用
5) 避免小文本或紧密链接,因为如果你的页面宽800像素,屏幕缩小到320像素,这些内容将很难阅读或点击。
6) 不要使用Flash
更普遍地说,你可以选择如何处理:
1) 用漂亮的大文本制作一个单独的网站设计,当缩小到小屏幕时可以很好地使用
2) 为您的网站设计两种布局,并使用JavaScript或CSS媒体分辨率查询在移动和桌面版本之间切换样式表,或
3) 制作一个所谓的液体布局,在不缩放的情况下,可以为不同的屏幕大小优雅地缩放宽度
您应该:
- 使您的智能手机列表更加特定。它们有很多,基本上不可能在每台设备上创建一个与智能手机的至少一个定义相匹配的高级交互式网站
- 在设备上不断测试,即使是官方模拟器也不能完全按照设备的工作方式工作(我相信苹果建议在设备上测试,而不是依赖他们的模拟器)
- 请注意使用
click
或hover
等JavaScript事件的脚本-它们在目标设备上可能更复杂(例如touchstart
、touchend
、touchmove
等),并确保将启用触摸的事件考虑在内
如果你已经定义了你的目标手机,你可以检查一些移动JavaScript框架是否满足你的需求(比如Sencha,但我发现它至少在我测试的一款Symbian手机上不起作用)。
你还应该检查兼容性表,显示你想使用的特定功能在哪个智能手机上可用;浏览器这会为你节省很多时间。
- 正在检测智能手机浏览器上的悬停或鼠标悬停
- plupload智能手机和平板电脑浏览按钮事件未启动
- 适用于可在网络浏览器和智能手机上运行的网站的 MP3 播放器
- js滑动不'我不能在智能手机上工作
- 响应式设计适用于桌面浏览器、移动模拟器(Safari和Mozilla Firefox),但不适用于真正的智能手机(And
- jquery html更新可以在电脑上使用,但不能在智能手机上使用
- 安卓应用无法在智能手机上打开网页
- 基于 Web 的应用程序是否有可能以某种方式访问智能手机的位置?并报告回来
- 智能手机:如何检测用户离开浏览器
- Fb UI 在智能手机 fb 应用程序中共享 URL 参数
- 为智能手机的 HTML 表格添加动画效果
- 将智能手机连接到网站
- 检索智能手机的电话号码或IMEI
- 如何动态更新HTML5/Javascript智能手机应用程序的HTML页面和相关图像
- HTML5播放器不会在智能手机上播放子域中的视频
- 如何访问智能手机'使用javascript启用或禁用s gps服务
- 如何使用javascript检测只有onclick事件的智能手机和平板电脑
- 当我在智能手机上显示时,将悬停添加到我的页面
- 阵列的最大大小不会破坏智能手机的性能
- javascript NavigatorUserMedia.getUserMedia智能手机背面摄像头