Having difficulty adjusting the meta tag viewport content width based on device width, I am struggling to achieve my desired outcome. Here is the code snippet I have been working with:
Code snippet:
<meta id="viewport" name="viewport" content="width=device-width">
When the device is an iPad, the window.innerWidth returns 768, which is correct. In this case, I would like to set the meta tag to:
<meta id="viewport" name="viewport" content="width=1024">
Essentially, I want iPad-sized screens to scale my site to 1024px. This adjustment works when placed in the head section. However, despite spending almost a full day attempting various solutions, I have been unable to change it successfully using JavaScript. It is crucial for me to execute this change through JavaScript because without it, all devices will scale to 1024px, which is not my desired outcome. For devices smaller than the iPad Portrait width (768), I aim to create a more responsive design.
On the flip side, if I initially set:
<meta id="viewport" name="viewport" content="width=1024">
In the head of my site, I encounter difficulties reverting it back for smaller screens as all devices then think they have a width of 1024...
The following code contains all necessary elements:
<!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>
My goal is to display the site at a 1024px width when viewed on iPads with a portrait width of 768, while ensuring responsiveness for smaller devices with appropriate media queries. Any advice or suggestions are greatly appreciated. Thank you.