Menu
I have a responsive site with a desktop width > 980px and a mobile width < 768px. I want tablets to view the site at a 980px viewport, but mobile to view at device width.
Specifically, I want the following:
width = device width
if width >= 768px
viewport = 980px
else
viewport = width
What is the best way to approach this problem? I don't want to check the useragent on the server.
706
Setting The ViewportThe width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Mobile (Smartphone) max-width: 480px. Low Resolution Tablets and ipads max-width: 767px. Tablets Ipads portrait mode max-width:1024px.
The size of the viewport can be defined using the width and height attributes of the <svg> element. In this example, the viewport has an aspect ratio of 3:4 and is, by default, 400 by 300 units, with a unit generally being a CSS pixel.
The viewport is the area in which your web page is drawn. Although the viewport's total visible area matches the size of the screen when zoomed all the way out, the viewport has its own pixel dimensions that it makes available to a web page.
From what I understand, you want to do this:
$(document).ready(function() {
// lets push in a viewport
var vpw = (screen.width>=768)?'980':'device-width';
$('head').prepend('<meta name="viewport" content="width='+vpw+'" />');
});
and from what I tested, that works. (Which is a bit funny, because the viewport is written after the document 'loaded'; you may see a little jump on screen, and YMMV.)
-- EDIT nowadays i just write this code in the head, like this
<head>
<script type="text/javascript">
var vpw = (screen.width>=768)?'980':'device-width';
document.write('<meta name="viewport" content="width='+vpw+'" >');
</script>
</head>
which is what monaca does, so I guess its ok https://github.com/monaca/monaca.viewport.js/tree/master
54
You can use a viewport meta tag and CSS media queries to accomplish this. In your HTML:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
In your CSS:
@media screen and (min-width: 768px) {
article {
width: 980px;
margin: 0 auto;
}
}
JSFiddle here
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
