移动设备上的 Bootstrap 3 桌面视图[关闭]答案

【问题标题】：Bootstrap 3 desktop view on a mobile device [closed]移动设备上的 Bootstrap 3 桌面视图[关闭]
【发布时间】：2015-10-12 05:45:22
【问题描述】：

我正在尝试在移动视图和平板电脑中显示桌面视图。我已经用谷歌搜索并尝试了很多方法，但它似乎不起作用

Bootstrap 3 - desktop view on a mobile device

How to force desktop view on mobile devices - Bootstrap?

Bootstrap 3 - desktop view on a mobile device

How to show desktop version on mobile screens, in Bootstrap 3?

https://github.com/twbs/bootstrap/issues/13995

我尝试了以下代码

<meta name="viewport" content="width=1024">

首先在 HTML 头元素中包含标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">



$(window).resize(function() {
    var mobileWidth =  (window.innerWidth > 0) ? 
                        window.innerWidth : 
                        screen.width;
    var viewport = (mobileWidth > 360) ?
                    'width=device-width, initial-scale=1.0' :
                    'width=1200';
    $("meta[name=viewport]").attr('content', viewport);
}).resize();

谁能告诉如何在最新的引导版本中解决这个问题？谢谢你

更新

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script>
$(window).resize(function() {
    var mobileWidth =  (window.innerWidth > 0) ? 
                        window.innerWidth : 
                        screen.width;
    var viewport = (mobileWidth > 360) ?
                    'width=device-width, initial-scale=1.0' :
                    'width=1200';
    $("meta[name=viewport]").attr('content', viewport);
}).resize(); 
</script>
</head>
<body>
<div class="bs-example">
    <form>
        <div class="form-group">
            <label for="inputEmail">Email</label>
            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="form-group">
            <label for="inputPassword">Password</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
        <div class="checkbox">
            <label><input type="checkbox"> Remember me</label>
        </div>
        <button type="submit" class="btn btn-primary">Login</button>
    </form>
</div>
</body>
</html>

【问题讨论】：

您的代码正在运行here。元属性值正在更改。你能说什么不适合你吗（我的意思是设置元属性或桌面样式）
@JSantosh.thank you.your 链接只显示加载。对我来说，我想在移动设备中显示桌面视图。
您能详细说明“不工作”是什么意思吗？
@Jacob.当在移动视图模式下查看此页面时，它不会显示桌面视图。

标签： php jquery css twitter-bootstrap

【解决方案1】：

你在 head 中使用了两个元标记？如果是这样，请删除：

<meta name="viewport" content="width=1024">

如果元标记不是，请输入：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

...您的 JavaScript 代码在哪里？头部：

<script>
  $(window).resize(function() {
    var mobileWidth =  (window.innerWidth > 0) ? 
                        window.innerWidth : 
                        screen.width;
    var viewport = (mobileWidth > 360) ?
                    'width=device-width, initial-scale=1.0' :
                    'width=1200';
    $("meta[name=viewport]").attr('content', viewport);
}).resize(); 
</script>

【讨论】：

@kaKarmacoma.thank you for answer.我试过了，即使它显示移动响应
我认为你的问题是合成器。你能创造一个小提琴吗？
@Karmacoma.i 更新了我的问题
@tester 在单击更改视图模式时您想要非响应结构还是按钮？
@Karmacoma.both 选项也可以。即使按钮 onclick 也可以