如何让我的HTML页面自动为移动用户调整?

时间:2012-06-20 20:45:52

标签: html mobile

是否有一种简单的方法可以为手机用户自动调整HTML页面?我的页面:http://www.xiexianhui.com/baxjoomla15/index0.html显然不适合我的sony xperia光线电话。

3 个答案:

答案 0 :(得分:17)

您首先应该看一下Responsive Web Design的概念。这太过分了,这个问题太过通用了,无法回答所有问题。但简而言之,它需要3个组件:

  1. 媒体查询,为不同的屏幕尺寸提供不同的CSS样式。
  2. 流体css网格,因此网站的布局会自动适应屏幕的大小。
  3. 图像灵活,因此所有图像都会流畅地缩小,因此它们不会与内容容器重叠。
  4. 如果您只想在手机屏幕上完整渲染您的网站,则必须使用viewport meta tag。将其放在您网页的<head>中:

    <meta name="viewport" content="width=device-width">
    

    ,您的页面将完全适合屏幕。但是你会注意到现在一切都非常小而且无法使用。响应式网页设计就是解决方案。

答案 1 :(得分:0)

捎带已经说过的话:WURFL,http://wurfl.sourceforge.net/,无线通用资源FiLe,是一个设备描述存储库(DDR),即一个将HTTP请求头映射到该配置文件的软件组件。发出请求的HTTP客户端(桌面,移动设备,平板电脑等)。

一个捷径:准备3种不同的布局,涵盖基本的旧手机,新的彩色手机和高级功能手机和PDA。这是一项相当简单的任务,同时也能提供很好的结果。我也给这个链接看一下。 http://mobiforge.com/developing/story/introduction-wurfl

答案 2 :(得分:-2)

尝试Bootstrap。需要我说更多吗?

http://getbootstrap.com/getting-started/