Question

我使用bootstrap Twitter设计了一个响应式设计的网站。这是一个非常复杂的页面响应明智，真的有很多数据，表格，div，js ......

它在电脑上运行良好;但是，一旦我尝试在手机上访问它，它就无法正常工作。它加载了所有数据，但由于响应式设计，手机似乎滞后。主要问题是我无法滚动浏览网页，只是卡在页面的某个部分。

我不介意拥有一个不会在手机上调整大小的静态网页，因为它很少会在移动设备上使用。我的想法是检查请求是来自手机还是计算机，然后加载静态页面或动态页面。

为此我需要一个工具将我的响应式设计转换为静态，并能够检查请求的来源。有没有人对我如何做到这一点有任何建议？这是一个好主意吗？我应该使用什么样的工具？

提前致谢，

EVOLUTION

我试图摆弄视口，这就是我想出的：

function calculateHeightOfBody() {
var heightBefore = window.innerHeight;

var height = heightBefore / window.devicePixelRatio;

viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', /*'width='+width+',*/ 'height='+height);

alert('heigh is ' + height);

}

然而，我现在得到的问题是我的电脑和手机上的高度值不同，我在电脑上获得955，在手机上获得1022。我需要能够以真实的方式计算页面的高度，因为我的所有页面都不是相同的高度。我怎么能这样做？我在这里问了一个具体的问题：Get height of page content

Answer 1

一种解决方案是修改bootstrap.css文件并删除所有媒体查询。

这个问题似乎是重复的。您可以在此处查看包含详细解决方案的原始帖子：

重复：How to remove responsive features in Twitter Bootstrap 3?

Answer 2

移动体验与子域（臭名昭着的“m”域）的隔离似乎有点老派。这可以满足您的要求，但我更喜欢One品牌，一个代码库，一个域名。

然而，Bootstrap并不是要从响应更改为静态。您可以执行此操作的唯一方法是添加浏览器检测和移动检测，并为该设备加载特定的css。

1.检查用户代理Serverside（我会使用此方法）

当浏览器访问某个站点时，它会发送一个字符串，描述它所谓的用户代理字符串。它取决于浏览器和平台。

iPhone - Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

等

if( strstr($_SERVER['HTTP_USER_AGENT'],'Android') ||
    strstr($_SERVER['HTTP_USER_AGENT'],'webOS') ||
    strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') ||
    strstr($_SERVER['HTTP_USER_AGENT'],'iPod')
    ){
    // Send Mobile Site
}

<强> 2.Clientside

if( navigator.userAgent.match(/Android/i) ||
    navigator.userAgent.match(/webOS/i) ||
    navigator.userAgent.match(/iPhone/i) ||
    navigator.userAgent.match(/iPod/i) ||
    ){
 // Send Mobile Site
}

3.使用CSS媒体类型

如果您的HTML不需要在移动网站和标准网站之间进行更改，那么将不同的样式表发送到移动浏览器可能更有意义。

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

这只会加载该分辨率所需的CSS。

4..htaccess网址重定向

您可以根据浏览器支持的MIME类型使用.htaccess重定向进行传输。如果用户的浏览器接受包含WML的mime类型，那么很可能它是移动设备。

RewriteEngine On
# Check for mime types accepted by mobile devices
RewriteCond %{HTTP_ACCEPT} "text\/vnd\.wap\.wml|application\/vnd\.wap\.xhtml\+xml" [NC]
RewriteCond %{REQUEST_URI} ^/$
RewriteRule ^ http://m.domain.com%{REQUEST_URI} [R,L]

5.window.location方法（不是最好的方式）

由于手机通常屏幕宽度较小，因此如果屏幕宽度小于或等于800像素，您可以将访问者重定向到您的移动网站。

<script type="text/javascript">
  if (screen.width <= 800) {
    window.location = "http://m.domain.com";
  }
</script>

如果你使用Wordpress等，还有插件。

将响应式引导程序设计转换为静态

2 个答案: