将tablet视口设置为1024px，移动设备宽度
将tablet视口设置为1024px，移动设备宽度
提问于 2012-10-13 16:09:58
我有一个响应式的网站，桌面宽度> 980px，移动宽度< 768px。我希望平板电脑在980px的视窗下查看网站，但移动设备可以在设备宽度下查看网站。
具体地说，我想要以下内容：
width = device width
if width >= 768px
viewport = 980px
else
viewport = width解决这个问题的最佳方法是什么？我不想检查服务器上的用户代理。
回答 9
Stack Overflow用户
回答已采纳
发布于 2013-01-25 17:55:08
据我所知，你想这样做：
$(document).ready(function() {
// lets push in a viewport
var vpw = (screen.width>=768)?'980':'device-width';
$('head').prepend('<meta name="viewport" content="width='+vpw+'" />');
});从我的测试来看，这是可行的。(这有点有趣，因为视区是在文档“加载”之后编写的；您可能会在屏幕上看到一个小跳跃和YMMV。)
--编辑现在我只是把这段代码写在头部，就像这样
<head>
<script type="text/javascript">
var vpw = (screen.width>=768)?'980':'device-width';
document.write('<meta name="viewport" content="width='+vpw+'" >');
</script>
</head>这就是monaca所做的，所以我猜它是可以的https://github.com/monaca/monaca.viewport.js/tree/master。
Stack Overflow用户
发布于 2012-10-16 08:46:14
您可以使用viewport meta tag和CSS media queries来完成此任务。在您的HTML中：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">在你的CSS中：
@media screen and (min-width: 768px) {
article {
width: 980px;
margin: 0 auto;
}
}JSFiddle here
Stack Overflow用户
发布于 2015-03-05 19:12:16
使用以下命令：
<meta name="viewport" content="width=device-width, initial-scale=1"/>在css中
.container{
width: 100%; /* for mobile */
max-width: 1024px; /* for pc and tablet */
}rest css:搜索媒体查询;)
如果你有一个移动设备，容器宽度是100%全尺寸。但在pc上的最大宽度是1024px。所以你可以用css来设计你的设计的其余部分。这不需要javascript或插件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12871259
复制相关文章
相似问题
腾讯云开发者
