个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
30
4
尝试更改设备宽度上的 meta 标记视口(viewport)内容宽度，但没有机会完成我需要的操作。我必须遵循以下代码:
与:
<meta id="viewport" name="viewport" content="width=device-width">
现在如果是 iPad，window.innerWidth 将返回 768，这是正确的。现在，如果是这样，我想将 meta 标记 设置为:
<meta id="viewport" name="viewport" content="width=1024">
所以 iPad 大小的屏幕应该将我的网站缩放到 1024 像素。如果我把它放在 head 部分，哪个有效。但正如我已经尝试了将近一天，现在没有机会用 Javascript 改变它。而且我需要用 javscript 更改它，因为如果我不是每个设备都缩放到我不想要的那些 1024px 的大小。如果设备小于 iPad 纵向宽度 (768)，我想让它的响应速度更快...
反过来，如果我设置:
<meta id="viewport" name="viewport" content="width=1024">
在我网站的 head 中，我无法在较小的屏幕上将其改回。导致所有设备认为它们的宽度为 1024...。
这里是所有需要的代码。
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta id="viewport" name="viewport" content="width=device-width">
<!-- <meta id="viewport" name="viewport" content="width=1024">-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta charset="UTF-8" />
<style>
* {
margin: 0;
padding: 0;
}
#container {
width: 1024px;
background-color: red;
}
@media all and (max-width: 767px) {
#container {
width: 100%;
margin: 0 auto;
background-color: gray;
}
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
alert(window.innerWidth);
if(window.innerWidth === 768) {
alert($("#viewport").attr("content"));
document.getElementById("viewport").setAttribute("content", "width=1024");
alert($("#viewport").attr("content"));
}
</script>
</head>
<body>
<div id="container">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</body>
</html>
我想得到的是。在纵向宽度为 768 的 iPad 上，我想将 1024px 的宽度缩放并显示为 100%。尽管我想在较小的设备上编写媒体查询并使其响应。
我做错了什么吗？感谢您的建议。
最佳答案
为什么不像这样简单化http://jsfiddle.net/fx2sudxg/1/embedded/result/
添加宽度:100%；最大宽度:1024px；到#container，它将根据视口(viewport)缩放:)
CSS
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
max-width: 1024px;
background-color: red;
margin: 0 auto;
}
@media all and (max-width: 767px) and (max-device-width: 767px) {
#container {
background-color: gray;
}
}
关于javascript - 根据设备宽度更改视口(viewport)宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26379687/
30
4
0
我正在尝试获得一个按钮，按下该按钮时会改变颜色。当再次按下时，它应该变回原来的颜色。我究竟做错了什么？ 我的模板中的按钮: export default { data: {
我是一名优秀的程序员,十分优秀！