Question

构建网站的最佳做法是什么，而不是使用不同屏幕尺寸的代码，例如调整浏览器大小时，甚至查看专为桌面浏览器大小设计的布局时，例如800X600或更高。我更像是一个后端开发人员，现在，我不得不构建一个我想使用jquery mobile的Web应用程序。我只是希望桌面的布局也发生变化。到目前为止，我只知道媒体类型。是否有更好的解决方案，如框架的东西。谢谢

Answer 1

您可以在css中使用客户端媒体查询来指定行为

@ media-query（min-width：320px）{ .do_not_show_on_small {display：none}

}

MDN Media Query Info

或使用服务器后端并查看用户代理并发回不同的HTML ...

http://www.whatsmyuseragent.com/

然后是服务器逻辑的一个例子：

if (ff8) then
   send (browser_html.html)
else if (android os)
   sned (mobile_html.html)

（当然，对于使用模板引擎的相同数据，这可能是不同的模板）。

Answer 2

在文档头上需要这些：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

这些是标准的媒体查询

/* #MEDIA QUERIES
================================================== */

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    body {min-width: 768px; } /* example */
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
    body {min-width: 320px; } /* example */
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    body {min-width: 420px; } /* example */
}

祝你好运！检查我的网站，了解它的工作原理：www.santz.net

为不同屏幕尺寸构建网站的最佳实践

2 个答案: