We Keep Coding

Javascript and mobile browser width issues

My goal is to prevent the js from loading on an element when the browser width is less than 500px. Basically, I don't want it to load on most mobile devices.
var mq = window.matchMedia( "(max-width: 500px)" );
if (mq.matches) {
// Don't load function //
}
else {
// Load function //
}
It seems straightforward, and when I try it on my laptop, it works perfectly. At over 500px and the js loads. At under or equal to 500px, it doesn't load.
On my phone, however, my js media query doesn't work because the function loads. Someone suggested that it might have to do with my meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
I'm not sure what I'm doing wrong, but I can't seem to successfully relay the mobile browser width to javascript. Any help is greatly appreciated.

When it comes to mobile browsers you can get funky results by using max-width: 500px media queries, because of the high pixel densities in mobile screens. Your best bet is to use device media queries, e.g. max-device-width. So in your case it will look like this:
var mq = window.matchMedia("(max-device-width: 500px)");
if (mq.matches) {
// Don't load function //
}
else {
// Load function //
}

Browser width for mobile

I have a Nexus 5, and when I go to http://ryanve.com/lab/dimensions/, it tells me that my width 360. I understand that there is a difference between my phone's resolution and the width of my browser.
However, when I write a function to change at under 767:
function detectmob() {
if($(window).width() <= 767) {
return true;
}
else {
return false;
}
}
if (detectmob()){
}
else {
}
It doesn't work on my phone. If I resize my browser window width to be <= 767 on my laptop, the function works correctly. When I view it on my Nexus 5, it doesn't.
Could anyone help me write a function to target mobile devices using the browser width?

When you visit a website via a mobile browser it will assume that you're viewing a big desktop experience and that you want to see all of it, not just the top left corner. It will therefore set the viewport width at (in the case of iOS Safari) 980px, shoe-horning everything into its little display.
The Viewport Meta Tag
Enter the viewport meta tag, introduced by Apple, then adopted and developed further by others.
It looks like this:
<meta name="viewport" content="">
Within the content="" you can enter a load of comma delimited values, but we're going to to focus on the fundamental ones for now.
For example, if your mobile design is purposely laid out at 320px you can specify the viewport width:
<meta name="viewport" content="width=320">
http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

Responsive design on android smartphone not fitting to screen

I'm having problems getting a Viewport which works on an android smartphone.
My site is fully responsive down to 480 pixels wide, whereupon it has a min-width set of 480px on the body tag.
My first viewport was this:
<meta id="myViewport" name="viewport" content="width=screen-width, user-scalable=yes"/>
This worked on most devices I checked, but on an Android phone, it appeared zoomed in and did not automatically shrink-to-fit to the width of the screen.
I then tried using javascript so that onload, the width attribute of the viewport changed to 480 rather than screen-width should window.innerWidth < 480. This half worked: when the page loaded, it then resized to fit the screen. However, during the load, it was still zoomed in, as expected.
Finally, I changed it to...
<script>
if (window.innerWidth < 480) {
document.write('<meta id="myViewport" name="viewport" content="width=480, user-scalable=yes"/>');
}
else {
document.write('<meta id="myViewport" name="viewport" content="width=screen-width, user-scalable=yes"/>');
}
</script>
This goes back to being zoomed-in. It works on other devices I have used.
Any ideas?

Try using the following meta tag
<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1, minimum-scale=1 initial-scale=1.0" />
Hope you are missing the scale parameters.

Force page zoom at 100% with JS

I created a little game in Canvas, but I have a problem. Some users who have the default zoom set to something other than 100% can't see the entire game page.
I have tried using this CSS:
zoom: 100%;
This HTML
<meta name="viewport" content="initial-scale=1.0 , minimum-scale=1.0 , maximum-scale=1.0" />
And this JS:
style="zoom: 75%"
Any ideas how to programatically set the page zoom?

You can set zoom property on page load
document.body.style.zoom = 1.0
But, zoom is not a standard property for all browsers, I recommend using transform instead.
var scale = 'scale(1)';
document.body.style.webkitTransform = scale; // Chrome, Opera, Safari
document.body.style.msTransform = scale; // IE 9
document.body.style.transform = scale; // General
http://jsfiddle.net/5RzJ8/

You can reset the code with this:
$("input, textarea").focusout(function(){
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">');
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=yes">' );
});

I think, this is very helpful answer how to detect page zoom level in all modern browsers. Then the answer to your question for IE:
document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;

It is working in chrome 66 :
document.body.style.zoom = (window.innerWidth / window.outerWidth)

The only way I found that works natively is in designing my HTML/CSS with the units "vw" and "vh" (% relative to the viewport) instead of "px". You can use it everywhere you used to put "px" (font-size, width, height, padding, margin, etc...). Very useful for a page designed to be display full screen only (no scroll) or "Kiosk-style". "vw" and "vh" are not affected by browser zoom.
See: https://www.w3schools.com/cssref/css_units.asp

For mobile browsers, #Linden's answer worked the best for me on Chrome. However on mobile FF it needed some additional tweaks, I came to version that works in both browsers:
let restore = $('meta[name=viewport]')[0];
if (restore) {
restore = restore.outerHTML;
}
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">');
if (restore) {
setTimeout(() => {
$('meta[name=viewport]').remove();
$('head').append(restore);
}, 100); // On Firefox it needs a delay > 0 to work
}
Also, the restored page viewport tag must have explicit maximum-scale to allow zooming on Firefox after resetting, so I set it initially to this:
<meta name="viewport" content="width=device-width, maximum-scale=10">
Tested on mobile Chrome 76.0 and mobile Firefox 68.1.

I'd try both solutions but the following is seems to be a bug in echarts which leads to cursor deviated.
document.body.style.zoom = 1.25; // work but not to be expected.
I wonder if there any solution for the browser to directly modify the zoom ratio just like what ctrl++/- effect.

How to make my simple website-quiz fittable to tablets and mobile phones?

how could I make my simple website-quiz fittable to tablets and mobile phones? The size of the quiz is 1024x672 in landscape mode. The size is static. If there's no bullet-proof solution for all devices, I would prefer a solution specific for iPhones and iPads.
Here's the quiz: http://wp.servitus.ch
Requirements:
auto-zoom dependent of current screen-size of the device
user should not be able to zoom manually
possible to force landscape mode ?
I already experimented with:
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
This works fine for iPads, but is way too large on the iPhone.
Any ideas ?

Currently I am using the code below. This meets my requirements for the moment (distinction between iPad, iPhone, Computer). If anyone has a bullet-proof solution for all possible devices, I would be glad if you would share it with me :-) Thanks!
$(document).ready(function() {
var isMobile = (/iPhone|iPod|Android|BlackBerry/).test(navigator.userAgent);
var isTablet = (/iPad/).test(navigator.userAgent);
if(isMobile) {
$('<meta name="viewport" content="initial-scale=0.45, maximum-scale=0.45, width=device-width, user-scalable=yes">').appendTo('head');
} else if(isTablet) {
$('<meta name="viewport" content="initial-scale=0.95, maximum-scale=0.95, width=device-width, user-scalable=no">').appendTo('head');
} else {
$('<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width, user-scalable=no">').appendTo('head');
}
});

This meta viewport can't help you, as the initial-scale is 1. That's why it's way too big for iPhone: you tell the device that the initial scale of this page must be 100% of its size (here : 1024px width), you have to remove this parameter or set it lower (0.5 or 0.625, as 640/1024 = 0.625).
Try with (this should work for iPhone and iPad) :
<meta name="viewport" content="width=device-width">
or (this should be very small on iPad) :
<meta name="viewport" content="initial-scale=0.6,user-scalable=no,maximum-scale=1,width=device-width">
EDIT :
This should work :
<meta name="viewport" content="width=1024">
I used that trick on a mobile website that haven't been well coded, it forces the viewport to 1024 and make it fit in the device screen. You can add whatever parameters to the meta.