我怎么能改变的宽度推特引导在移动视图到完整视图

How can I change the width of Twitter Bootstrap in mobile view to full view

本文关键字：视图 移动 能改变      更新时间：2023-09-26

我对web、css和jquery都是新手
我知道我的问题不感兴趣，但我需要帮助....
我试图使一个引导基地网站，我知道引导是响应基地经过搜索，我发现框架可以支持非响应式
检查bootstrap响应后，我发现

/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }

现在我如何改变引导宽度在移动视图到完整视图我的意思是，当我通过手机加载我的网站有按钮，如"桌面视图"。然后所有的视图和元素返回到大桌面视图我在点击链接后尝试了这个，但不工作

$('body).modal({
    backdrop: true,
    keyboard: true
}).css({
    width: '1201',
    'margin-left': function () {
        return -($(this).width() / 2);
    }
});

仅使用Javascript在移动和桌面布局之间切换将会有点粗糙。特别是如果你想记住用户是否在关闭浏览器后选择了视图。

然而，你仍然可以通过这样做来实现你想要的:

<!DOCTYPE html>
<title>Viewport</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<button id="mobile">Mobile View</button>
<button id="desktop">Desktop View</button>
<script type='text/javascript'>
    $('#mobile').on('click', function() {
        $('meta[name=viewport]').remove();
        $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">');
    });
    $('#desktop').on('click', function() {
        $('meta[name=viewport]').remove();
        $('head').append('<meta name="viewport" content="width=1280, initial-scale=1.0">');
    });
</script>

我强烈建议你关注donner关于这个问题的评论链接，了解为什么我的解决方案对你想要达到的目标不是最佳的。

相关文章：