文章/答案/技术大牛

发布

社区首页 >问答首页 >将响应引导设计转换为静态

问将响应引导设计转换为静态
EN

Stack Overflow用户

提问于 2015-08-12 08:54:19

回答 2查看 250关注 0票数 1

我已经设计了一个网站，在响应设计使用引导Twitter。这是一个非常复杂的页面响应明智，有大量的数据，表，div，js…。

它在电脑上工作得很好；然而，一旦我试图用手机访问它，它就无法工作。它加载所有的数据，但似乎手机是滞后的，因为响应设计。主要的问题是，我不能滚动网页，它只是停留在页面的一个部分。

我不介意有一个静态网页，不调整大小的手机，因为它是非常罕见的，它将用于移动设备。我的想法是检查请求是来自移动电话还是来自计算机，然后加载静态页面或动态页面。

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

提前谢谢你，

演化

我试着摆弄视图，下面是我想出的：

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

html

twitter-bootstrap

mobile

responsive-design

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-08-12 08:58:11

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

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

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

票数 1

Stack Overflow用户

发布于 2015-08-12 09:07:57

将移动体验分离到一个子域，臭名昭著的“m”域，似乎有点过时。这可以满足你的要求，但我更喜欢一个品牌，一个代码库，一个域名。

但是，引导并不意味着从响应更改为静态。您可以这样做的唯一方法是添加浏览器检测和移动检测，并为该设备加载特定的css。

1.检查用户代理服务器端(我将使用此方法)

当浏览器访问一个站点时，它会发送一个字符串，描述它称为用户代理字符串的人。这取决于浏览器和平台的不同。

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.客户端

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 URL重定向

您可以根据浏览器支持的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等，也会有相应的插件。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31960409

复制

相似问题

问将响应引导设计转换为静态
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将响应引导设计转换为静态EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将响应引导设计转换为静态
EN