在设备宽度上更改视口宽度
[英]Change viewport width on device width
问题描述
Trying to change the meta tag viewport content width on device width with no chance to accomplish what I need. 
尝试在设备宽度上更改meta tag viewport content width ，而没有机会完成我所需要的。 I have to following code: 我必须执行以下代码：
with: 与：
<meta id="viewport" name="viewport" content="width=device-width">
Now if it is is an iPad the window.innerWidth will return 768 which is right. 现在，如果是iPad，则window.innerWidth将返回正确的768 。 Now if so, I would like to set the meta tag to: 现在，如果是这样，我想将meta tag设置为：
<meta id="viewport" name="viewport" content="width=1024">
So the iPad size screens should scale my site to those 1024px. 因此，iPad尺寸的屏幕应将我的网站缩放为1024px。 Which works if I put that in head section. 如果将其放在头部，该方法有效。 But as I've tried for almost a day now there is no chance to change that with Javascript. 但是，由于我已经尝试了将近一天，所以没有机会使用Javascript进行更改。 And I need to change it with javscript cause if I dont every device scales to the size of those 1024px which I dont want. 如果我没有将每个设备缩放到我不想要的1024px的大小，则需要用javscript原因进行更改。 If device is smaller than iPad Portrait width (768) I would like to make it more responsive... 如果设备小于iPad纵向宽度（768），我想使其响应速度更快...
The other way round if I set: 相反，如果我设置：
<meta id="viewport" name="viewport" content="width=1024">
In the head of my site I can't change it back on smaller screens. 在我网站的head ，我无法在较小的屏幕上更改它。 Cause all devices than think they have a width of 1024... . 因为所有设备的宽度都超过了1024 ...。
Here is all the code needed. 这是所有需要的代码。
<!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>
What I'm trying to get is. 我想要得到的是。 On iPads which have a Portrait Width 768 I would like to scale and show width of 1024px as 100%. 在纵向宽度为768的iPad上，我要缩放并将1024px的宽度显示为100％。 On smaller devices though I would like to write media queries and make it responsive. 在较小的设备上，尽管我想编写媒体查询并使之响应。
Am I doing something completely wrong? 我做错了什么吗？ Thanks for advices. 感谢您的建议。
1 个解决方案
解决方案1
2 已采纳 2014-10-15 10:20:04
Why don't you make it simple like this http://jsfiddle.net/fx2sudxg/1/embedded/result/ 您为什么不像这样简单呢http://jsfiddle.net/fx2sudxg/1/embedded/result/
Add width:100%; 增加宽度：100％; max-width: 1024px; 最大宽度：1024px； to the #container and it will scale according to the viewport :) 到#container，它将根据视口缩放：）
The CSS 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;
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.