Question

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

我尝试过其他网站，但是当检测到移动设备时，其他网站正在使用301重定向，并且他们的网址将转移到移动网址。我很好奇谷歌如何做到这一点（在移动屏幕上更改移动友好的网页布局，但保持相同的网址）。我一直在思考这个问题，直到我无法入睡。这里有没有人知道谷歌使用的技巧是什么？

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">

在移动设备上显示移动设备兼容性

2 个答案: