Php 移动设备上的Bootstrap 3桌面视图
我正在尝试在移动视图和平板电脑中显示桌面视图。我在谷歌上搜索并尝试了许多方法,但它似乎不起作用 我尝试了以下代码Php 移动设备上的Bootstrap 3桌面视图,php,jquery,css,twitter-bootstrap,Php,Jquery,Css,Twitter Bootstrap,我正在尝试在移动视图和平板电脑中显示桌面视图。我在谷歌上搜索并尝试了许多方法,但它似乎不起作用 我尝试了以下代码 <meta name="viewport" content="width=1024"> 首先在HTML head元素中包含标记: <meta name="viewport" content="width=device-width, initial-scale=1.0"> $(window).resize(function() {
<meta name="viewport" content="width=1024">
首先在HTML head元素中包含标记:
<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();
$(窗口)。调整大小(函数(){
var mobileWidth=(window.innerWidth>0)?
window.innerWidth:
屏幕宽度;
var视口=(移动宽度>360)?
'宽度=设备宽度,初始刻度=1.0':
‘宽度=1200’;
$(“元[名称=视口]”).attr('内容',视口);
}).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>
$(窗口)。调整大小(函数(){
var mobileWidth=(window.innerWidth>0)?
window.innerWidth:
屏幕宽度;
var视口=(移动宽度>360)?
'宽度=设备宽度,初始刻度=1.0':
‘宽度=1200’;
$(“元[名称=视口]”).attr('内容',视口);
}).resize();
电子邮件
密码
记得我吗
登录
您在头部使用两个元标记?如果是,请删除以下内容:
<meta name="viewport" content="width=1024">
如果meta标记不是,请输入以下内容:
<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>
$(窗口)。调整大小(函数(){
var mobileWidth=(window.innerWidth>0)?
window.innerWidth:
屏幕宽度;
var视口=(移动宽度>360)?
'宽度=设备宽度,初始刻度=1.0':
‘宽度=1200’;
$(“元[名称=视口]”).attr('内容',视口);
}).resize();
您的代码正在运行。正在更改元属性值。你能说什么对你不起作用吗(我是说设置元属性或桌面样式)@JSantosh.谢谢。你的链接只显示加载。对我来说,我想在移动设备中显示桌面视图。你能详细说明“不起作用”是什么意思吗@Jacob.当以移动查看模式查看此页面时,它将不会显示桌面视图。@kaKarmacoma.谢谢您的回答。我尝试过,即使它显示移动响应,我认为您的问题是synthax。你能做一把小提琴吗?@Karmacoma。我已经更新了我的question@tester单击以更改视图模式时,是否需要非响应结构或按钮?@Karmacoma.two选项也可以。即使按钮一次单击也可以