Question

我有一个不支持移动设备的网站，但作为广告系列的一部分，我们将发送一个包含优惠券的二维码，以便链接到此网站上的“隐藏”页面。当然，当用户要从手机访问此页面时，此页面需要启用移动设备。

我的问题是，我该怎么做呢？

我知道你需要一个单独的移动样式表，但我以前从未这样做过。这是最好的方法吗？我只能访问网站的前端，所以后端需要做什么吗？

如果这看起来有点模糊，请提前致谢并道歉。

Answer 1

您需要在<head>中使用此功能才能使其跳转到移动版面。

  ...

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=devide-width, initial-scale=1.0" />

  <title> ... </title>

  ...

  <link href="/stylesheets/mobile.css" media="only screen and (max-width: 767px)" rel="stylesheet" type="text/css" />

然后使用mobile.css样式表设计移动版网站，媒体查询将自动选取该版块。

希望这有帮助。

Answer 2

您可以将页面放到手机屏幕上。例如，页面宽度最大为480px，避免过大的图片，不要使用java脚本等。

Answer 3

我的问题是，我该如何做到这一点？

如果您想将同一页面用于常规尺寸显示和移动尺寸显示，请查看media queries，以便adaptive design mediaqueri.es有一些示例。< / p>

无论您是否想要适应显示尺寸，唯一的另一个主要因素是测试。确保您在一系列设备和浏览器上进行测试。

Answer 4

你是对的，你应该从mobile.css开始。您还应该使用mobile.js，因为不需要大多数重量级的JavaScript，并且您希望保持请求数量减少和文件大小变小。

我建议在后端使用某些东西，这可以防止加载常规的.css和.js文件，可能基于用户代理（最好的方法是完整的其他主题）。否则，您将不得不覆盖原始.css文件中的每个样式，这对于提供给移动设备的信息来说太多了。

如果您想制作整个网站的移动版本，那将是一种方法。因为你只提到了一个页面，你只需要制作一个简单的.css文件和一个（简单的）页面，它填充整个移动设备的屏幕，使用类似的东西：

<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />

再一次，请确保不要加载不必要的.css和.js文件

构建一个兼容Mobile的单页 - 从哪里开始？

4 个答案: