如何在移动设备上查看移动内容？

我有一个能在桌面上呈现出色的页面，其标记与手机的标记完全不同，因为两者的设计都不同。如何在移动设备上查看移动内容？

我在现有的桌面标记中添加了额外的<div>。

我使用媒体查询从桌面切换到手机，通过隐藏移动内容（如果在桌面上查看宽度> 1024），反之亦然。

我还为移动设备和ipad使用了两种不同的元标记。

对于移动：去除收缩效应（放大/缩小）

为iPad：允许收缩效应（放大/缩小）

我通过JavaScript添加此meta标签，其增加了元移动如果它是移动和平板电脑ipad

现在，当在移动设备上查看页面时，桌面版会加载几秒钟，之后便可看到移动版。

是否有可能我应该能够首先查看我的手机版本，或者当在手机上查看时只需隐藏桌面版本？

这里是我的JavaScript代码来切换元：

var browserdetect = function() { 

    var ismobile = (/iphone|ipod|android|blackberry|opera|mini|windows\sce|palm|smartphone|iemobile|ipad|android 3.0|xoom|sch-i800|playbook|tablet|kindle/i.test(navigator.userAgent.toLowerCase())); 

    var istablet = (/ipad|android 3.0|xoom|sch-i800|playbook|tablet|kindle/i.test(navigator.userAgent.toLowerCase())); 

    var metaiphone = '<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0 maximum-scale=1.0, user-scalable=no">'; 

    var metaipad = '<meta name="viewport" content="width=1300">'; 

    if(ismobile) { 
     if(!istablet) { 
      if($('body').hasClass('responsive-page')){ 
       $('head').append(metaiphone); 
      }    
     } else { 
      $('head').append(metaipad); 
      // console.log("tab");  
     } 
    } 
}

来源

2013-01-24 ramshinde1992

我不明白为什么如果您使用媒体查询时需要显示特定版本的网站。从您的描述看，您的媒体查询应该足以在每个平台上显示正确的内容，因为它已正确设置。关于您的浏览器检测功能，您是否将它称为您的页面中的某个位置？ – darshanags

你说得对，我使用媒体查询让我的网站响应，但问题是当第一次在移动设备上加载页面时，它显示桌面版本，几秒钟后显示移动版本。我想这是因为上面提到的javascript代码检测哪个是userAgent，如果它是ipad，它会添加不同的元素，反之亦然，因为哪个页面最初加载速度慢！ – ramshinde1992

你一切都搞砸了这一点。如果与桌面版本完全不同，您应该只为移动客户端提供移动html & css。您应该检测服务器上的客户端，并确定哪些html将发送给他们（或将移动客户端重定向到具有移动版本的其他域）。

媒体查询的重点是修改现有的html，你必须在不同的设备上工作。您应该阅读本文以进行快速概述：http://learn.shayhowe.com/advanced-html-css/responsive-web-design

来源

2013-01-24 11:22:25

如何在移动设备上查看移动内容？

回答

相关问题