All geek questions in one place

Set the tablet screen to 1024 pixels, mobile to device width

I have a responsive site with a desktop width> 980px and a mobile width <768px. I want tablets to browse the site in a 980px viewport, but mobile to view across the width of the device.

In particular, I want the following:

width = device width if width >= 768px viewport = 980px else viewport = width

What is the best approach to this problem? I do not want to check useragent on the server.

+4
source share
10 answers

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, it works. (Which is a little funny, because the viewport is being recorded after loading the document, you can see a small jump on the screen and YMMV.)

- CHANGE now I just write this code in my 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 monaka does, so I think it's fine https://github.com/monaca/monaca.viewport.js/tree/master

+9
source

You can use the viewport meta tag and CSS multimedia 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

+2
source

use this:

 <meta name="viewport" content="width=device-width, initial-scale=1"/>

in css

 .container{ width: 100%; /* for mobile */ max-width: 1024px; /* for pc and tablet */ }

other css: queries in search environments;)

If you have a mobile device, the width of the container is 100%. But in pc, the maximum width is 1024px. That way you can construct the rest of your design with css. It does not require javascript or a plugin.

+2
source 
 @media only screen and (min-width: 768px) and (max-width: 980px) { ... }

Adjust accordingly. Essentially, this code provides the ceiling and gender value for this “average” device (such as a tablet).

You can tighten this window to force the CSS desktop or most of it to do something like:

 @media only screen and (min-width: 800px) and (max-width: 1024px) { ... }

Besides the fact that you are doing something like this, you will have to “sniff” a device that picks up 90 (imo are not those days?) Or use metadata in viewport.

+1
source

Given that a mobile device (rather than a tablet) has a significantly smaller viewing window than the 768, why not just update the media query to apply smaller changes? i.e:

 @media only screen and (max-width: 480px) { ... }

Thus, your phone styles apply only to smaller devices with a maximum width of 480 pixels.

Your desktop site (and now tablet) will still display above these permissions.

+1
source

Could you use CSS to load CSS? They have pre-created media classes that you can customize a little.

http://twitter.github.com/bootstrap/scaffolding.html

I think this part is most relevant to what you are talking about

 /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) { ... }

At this point, you can use the settings to set the span of the liquid to approximately

  Label Layout width Column width Gutter width
 Default 768px and above 42px 20px
 Phones to tablets 767px and below Fluid columns no fixed widths

Note. Since you will use a fixed column width, the div will not scale above the width of the fix column.

0
source

I also do this every time the client wants to have a responsive mobile version, but leaving the default scaling on something bigger is really not much on the web server: setting the viewport tag is different for different screen sizes, so using JS still seems to be the best option. I indicate the width of the viewport is not responsive by default, for example.

  <meta name="viewport" content="width=1000">

then run the following code as soon as possible (i.e. right after loading jQuery, but NOT wrapped by jQuery.ready () or something equivalent, since the window.screen property seems accurate and available immediately. This can avoid a slight switch to mobile phones that may occur if the code was launched later):

 if (window.screen.width < 601) { $('meta[name=viewport]').attr('content','width=device-width, initial-scale=1'); }
0
source 
 (function() { window.monaca = window.monaca || {}; var IS_DEV = false; var d = IS_DEV ? alert : function(line) { console.debug(line); }; /** * Check User-Agent */ var isAndroid = !!(navigator.userAgent.match(/Android/i)); var isIOS = !!(navigator.userAgent.match(/iPhone|iPad|iPod/i)); var defaultParams = { width : 640, onAdjustment : function(scale) { } }; var merge = function(base, right) { var result = {}; for (var key in base) { result[key] = base[key]; if (key in right) { result[key] = right[key]; } } return result; }; var zoom = function(ratio) { if (document.body) { if ("OTransform" in document.body.style) { document.body.style.OTransform = "scale(" + ratio + ")"; document.body.style.OTransformOrigin = "top left"; document.body.style.width = Math.round(window.innerWidth / ratio) + "px"; } else if ("MozTransform" in document.body.style) { document.body.style.MozTransform = "scale(" + ratio + ")"; document.body.style.MozTransformOrigin = "top left"; document.body.style.width = Math.round(window.innerWidth / ratio) + "px"; } else { document.body.style.zoom = ratio; } } }; if (isIOS) { monaca.viewport = function(params) { d("iOS is detected"); params = merge(defaultParams, params); document.write('<meta name="viewport" content="width=' + params.width + ',user-scalable=no" />'); monaca.viewport.adjust = function() {}; }; } else if (isAndroid) { monaca.viewport = function(params) { d("Android is detected"); params = merge(defaultParams, params); document.write('<meta name="viewport" content="width=device-width,target-densitydpi=device-dpi" />'); monaca.viewport.adjust = function() { var scale = window.innerWidth / params.width; monaca.viewport.scale = scale; zoom(scale); params.onAdjustment(scale); }; var orientationChanged = (function() { var wasPortrait = window.innerWidth < window.innerHeight; return function() { var isPortrait = window.innerWidth < window.innerHeight; var result = isPortrait != wasPortrait; wasPortrait = isPortrait; return result; }; })(); var aspectRatioChanged = (function() { var oldAspect = window.innerWidth / window.innerHeight; return function() { var aspect = window.innerWidth / window.innerHeight; var changed = Math.abs(aspect - oldAspect) > 0.0001; oldAspect = aspect; d("aspect ratio changed"); return changed; }; }); if (params.width !== 'device-width') { window.addEventListener("resize", function() { var left = orientationChanged(); var right = aspectRatioChanged(); if (left || right) { monaca.viewport.adjust(); } }, false); document.addEventListener('DOMContentLoaded', function() { monaca.viewport.adjust(); }); } }; } else { monaca.viewport = function(params) { params = merge(defaultParams, params); d("PC browser is detected"); monaca.viewport.adjust = function() { var width = window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth; var scale = width / params.width; zoom(width / params.width); params.onAdjustment(scale); }; if (params.width !== 'device-width') { window.addEventListener("resize", function() { monaca.viewport.adjust(); }, false); document.addEventListener("DOMContentLoaded", function() { monaca.viewport.adjust(); }); } }; } monaca.viewport.isAndroid = isAndroid; monaca.viewport.isIOS = isIOS; monaca.viewport.adjust = function() { }; })();

--------------------------- scall support tab -------------

this feature on javascript support tablets

0
source

Just show the viewport only under a certain point.

In this example, the viewport command is displayed below 768px

  <script type="text/javascript"> //below 768px is mobile if(screen.width<768) document.write('<meta name="viewport" content="width=device-width, initial-scale=1">'); </script>
0
source

This code can be used in the title.

 <meta name="viewport" content="width=device-width, initial-scale=1"/>

and then use this style for a mobile device

 <link rel="stylesheet" media="print and (min-width: 767px)" href="http://…" />
-1
source

Source: https://habr.com/ru/post/1439521/

More articles:


All Articles