手机网页开发最佳实践

2021-12-22 00:00:00 php mobile-phones mobile

我想知道如何制作一个在大多数手机上看起来都不错的网页.为了制作普通网页,我使用dreamweaver cs3.我真的不想使用模拟器,除非我也有.我能不能不把所有东西都放在中间,两边都有自动边距.

I would like to know how I can make a webpage that will look good in most mobile phones. For making normal webpages, I use dreamweaver cs3. I don´t really want to use emulators unless I have too. Can I not just center everything in the middle, with auto margins on both sides.

当我查看到目前为止制作的页面时,它们看起来不错,但在手机中,有些东西会变得杂乱无章.我打算去掉所有非必要信息和标记,以便在手机上使用.

When I am looking at the pages that I have made sofar, they look ok, but in a mobile phone some things get cluthered. I am planning to strip out all the non essential information and markup for use on the mobile phone.

那么问题来了,基本上对我来说现在最重要的一个

Then there is the question, basicly the most important one for me now

如果手机转到同一个地址,如何呈现不同的页面?

How to present a different page if the mobile phone go´s to the same address?

编辑

我没有得到最后一个答案,但我找到了一个可以使用的浏览器检测脚本.

I diddn´t get an answer om the last one, but I found a browser detection script that I could use.

谢谢,理查德

推荐答案

为了获得最大的兼容性,您必须在放弃大多数花哨的浏览器的情况下进行权衡,考虑在台式计算机上运行磨.

In order to get the greatest amount of compatibility, you have to trade it off with ditching most of the bells and whistles browsers running on desktop computers consider run of the mill.

  • 使用您的 XHTML 文档声明移动文档类型,并确保您的标记和样式表有效.
  • 让您的 CSS 变得真正简单.否 :hover,不要在设计中使用图片,限制使用固定尺寸/边距.
  • 模拟器在测试方面不如实际设备本身有效.支持 Wifi/蓝牙 PAN 的手机可以让生活更便宜,但通过运营商的网络进行测试也将帮助您更好地了解速度和延迟.
  • 没有典型设备",但是如果您可以在不使用 webkit 的 CSS 插件的情况下让您的网站在 webkit 下看起来非常好,那么您已经涵盖了大量设备(诺基亚 S60、iPhone、Android 等).使用 Opera Mini,您将进一步扩展该块.
  • 尽可能压缩您的输出.您的最终用户不仅会受到屏幕和 CPU 处理的限制,而且很可能会受到网络的限制.您向他们推送数据的速度越快,您的网站就会越慢.
  • Declare the mobile doctype with your XHTML documents, and make sure your markup and styleheets are valid.
  • Keep you CSS real simple. No :hover, don't use images as part of the design, limit your usage of fixed sizes/margins.
  • Emulators aren't as effective for testing as the actual devices themselves. Phones that do Wifi/Bluetooth PAN can make life cheaper, but testing over carrier's network will also help you get a better understanding of the speed and latency.
  • There is no "typical device", but if you can get your website looking really good under webkit without using webkit's CSS addons, you've covered a huge chunk of devices (Nokia S60, iPhone, Android etc). Work with Opera Mini, and you'll expand that chunk even more.
  • Compact your output as much as possible. Not only are your end users going to be screen and CPU processing limited, they are most likely going to be limited by network. The faster you can push out your data to them, the less-sluggish your website will feel.

相关文章