如何使网页移动？答案

【问题标题】：How to make a web page mobile?如何使网页移动？
【发布时间】：2012-08-19 20:09:52
【问题描述】：

是否有任何特定的 html 标记或元标记表明网页是为移动设备设计的？我创建了一个链接移动网页的移动站点地图，但我担心搜索引擎不会将这些网页识别为移动版本。

【问题讨论】：

我们谈论网站的外观吗？因为这是（或应该）由 css 控制的。
我主要关心的是如何根据浏览设备（如果移动设备或非移动设备）为同一网页显示两种不同的布局、设计和文本量。我创建了一个专门针对移动设备的 m.domain.com 站点，我担心搜索引擎会在其中找到重复的内容...
您在此处提到的所有内容，layout、designs 和 volume of text 都可以并且应该通过 CSS 和媒体查询进行控制。请先生使用这些。 PLZZ。

【解决方案1】：

我建议在您的 CSS 中使用 Media Queries，如果您要使用此技术，请先专注于开发您的移动网站。

基本示例

@media only screen and (min-width: 480px){
  //insert styles SPEFIC to resolutions greater than 480px wide
}

关于评论：

//default CSS
.hidden-for-mobile{ display: none;}
//overrides the hidden style, and displays your element in larger resolution browsers.
@media only screen and (min-width: 480px){
  display: inline; //or block or whatever you want 
}

很可能有不同的或更好的方法来实现这一点，但重点是......

如果您想控制网站的外观/感觉，请尽量将其保留在样式表中

专业提示： 您将希望使用 em / % 基于宽度来确保您的网站正确响应您的用户浏览器

查看 HTML5 样板的工作示例here。

和媒体查询浏览器支持列表here

另外，如果您担心跟踪您的用户群，Google Analytics 可以为您做到这一点。您可以根据需要细分流量。

【讨论】：

这些媒体查询似乎对避免移动域中的重复内容非常有用，但对我来说还不够，因为在移动域我限制了很多暴露的内容，试图保持屏幕区域和屏幕区域之间的合理比例信息量。

【解决方案2】：

不，没有。您可以使用 JavaScript 检测移动浏览器，并将用户引导至您网页的特殊移动版本，但对于特定页面没有任何说明这是针对移动浏览器的。

如果您担心会向 Google 展示重复的内容，请阻止对您的移动网站 via a robots.txt file 的抓取，然后确保移动用户始终被重定向到正确的移动网站。

【讨论】：

是的，我担心的正是这一点。我有一个 domain.com 和一个 m.domain.com。我不希望搜索引擎在移动域中找到重复的内容，因为这可能意味着对搜索排名的某种惩罚。如果我能以某种方式明确 m.domain.com 上的页面特定于移动设备，我会感觉更好......
@sn-psofcode OK - 查看更新的答案。从您的移动网站阻止 google。

【解决方案3】：

如果您关心样式和事物，请参阅How to setup HTML for mobile Devices with an header-image, that takes whole width of browser?

否则，如果您不希望搜索引擎链接到 m.domain.com 而不是 domain.com（或其他），那么我会考虑进行一些 PHP 标头检测以重定向到主站点。

为确保它们根本不会被抓取，因此永远不会显示在搜索结果中，请添加

<meta name="robots" content="noindex" />

【讨论】：

我已经有一个重定向以避免移动设备留在主域。但是搜索引擎爬虫呢？我在哪里重定向它们？主域、移动域还是无重定向？
完全没有重定向，如果你不想让它们被抓取，因为你希望每个人都被引导到主站点，那么将<meta name="robots" content="noindex" />添加到移动页面，它们将不会被索引.