在移动设备上显示 Mobile Compatible

Question

请允许我问一个关于 Google 网站 (google.com) 的愚蠢问题。我用电脑浏览器和智能手机浏览器测试了他们的网站。好的！这是我的问题，当我将计算机浏览器设置为小屏幕时，Google 网站的布局不适合移动设备。但是，当它在移动屏幕上时，它确实变成了移动友好的布局。但是，url 仍然是相同的 http://www.google.com。

我试过其他网站，但其他网站在检测到手机屏幕时使用 301 重定向，他们的 url 将转移到手机 url。我很好奇 google 如何做到这一点（更改移动屏幕上的移动友好 Web 布局但保持不变 url）。我一直在想这个问题，直到我睡不好觉。这里有谁知道google有什么技巧吗？

Answer 1

这是在使用媒体查询：

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

检查此 link 了解更多详情

只是 css 网站在移动设备上时的样式，例如您希望 div 不在移动设备上显示，您可以这样做：

@media only screen 
      and (max-width: 480px) {
    .yourdiv{display:none;}
    }

勾选这个example

Answer 2

也许您的意思是 viewport meta tag 如果是移动设备，哪个适合页面布局？ <meta name="viewport" content="width=device-width">

在移动设备上显示 Mobile Compatible

Display Mobile Compatible when it's on mobile

css

mobile

jquery-mobile