Quick help scaling a website - javascript

I try to set the initial scale of this website.
I tried this:
document.body.style.zoom = '0.8';
and this:
document.body.style.webkitTransform = 'scale(0.8)';
Unfortunatelly the slider of the timeperiod-bar looses it´s functionality. Does anyone know a workaraound for that? Thanks everyone for ideas.
UPDATE: New approach:
var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=0.8, maximum-scale=0.8, user-scalable=0"
document.getElementsByTagName('head')[0].appendChild(metaTag);
Here, nothing happens at all.
EDIT: Another approach:
document.querySelector("meta[name=viewport]").setAttribute(
'content',
'width=device-width, initial-scale=0.8, user-scalable=no');
unfortunately no success.

To set the initial scale, you need to adjust your viewport in the meta.
Currently , your meta tag sets the scale to 1
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Change the 1.0 to 0.8 and it should adjust accordingly.
<meta name="viewport" content="width=device-width, initial-scale=0.8" />
For what it's worth, I resized it using my browser window, and the zoom still worked fine when I clicked on the buttons.
(The bar doesn't seem to work even at full screen; I have a 15" laptop and the bar slider didn't work, but the buttons work; you can maybe hide the bar?)
Hope this helps
EDIT
The allowable values for user-scalable are yes or no, not 0 and 1.
Set user-scalable to no if you want it to be non-scalable. Also set the initial-scale as well as the maximum-scale
RE-EDIT
see https://stackoverflow.com/a/9232064/1675954 for how to edit meta tags using jquery
The javascript solution: follow this syntax
document.querySelector('meta[name="viewport"]').setAttribute("content", _desc);
See this article also for updating for media queries

Chrome Window Resizer has been a life saver checking if webpages works across all platforms.
https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en

Related

Prevent zooming using a touchscreen in a website (IE 11, Win 10)

I have a website created using jQuery Mobile. And I want to disable the zoom functionality or prevent the user from being able to zoom in using pinch zoom or tapping with 2 fingers simultaneously.
I was looking for an answer but I just can't find an answer that works.
I tried using the meta tag:
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
Also tried:
body { -ms-content-zooming: none },
html { -ms-content-zooming: none },
.ui-page { -ms-content-zooming: none }
None of those solutions work.
Try user-scalable = no instead of user-scalable = 0.
So after more research i finally found a solution to my problem. Not the most handsome one but it works for me. I had to add an additional Key to the Internet Explorer Registry(HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Zoom) to prevent any Zoom.
A full guide can be found HERE

Using .scrollTop animation with mobile device not working

I have a footer that appears when a user scrolls down on the bottom of the page, but for seem reason it doesn't appear to be working on mobile devices, particularly the ipad, and it seems finicky on there. Sometimes it works sometimes it doesn't and only when using the ipad vertically.
<script type="text/javascript">
var $window = jQuery(window);
var $document = jQuery(document);
var footer = jQuery('.footer');
footer.css({opacity: 0});
$window.on('scroll', function() {
if (($window.scrollTop() + $window.innerHeight()) == $document.height()) {
footer.stop(true).animate({opacity: 1}, 250);
}
else {
footer.stop(true).animate({opacity: 0}, 250);
}
});
</script>
Just fades in and out on the bottom of the page condition. I looked around and there seems to be several ways to go about doing this and I was wanting to know the most effective solution.
I thought I had found a jfiddle for a solution a while ago but can't seem to find that question anymore and it required me to dig quite a bit.
I'm not exactly sure all of the factors that go into mobile not being compatible with this solution I currently have, so it's hard for me to determine what needs adjusting. Thanks.
Actually figured out the issue is that it needs to be the exact document height if I'm using '==', in mobile devices the viewpoint doesn't trigger the script while moving or scrolling so I had t change the '==' to '>=' in my condition and then add height to my viewport.
if (($window.scrollTop() + $window.innerHeight()) >= $document.height())
And in my header viewport tag
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
And it works perfectly!

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.

JQM fixed header with iOS transparent statur bar

What is the best way to change the JQM styles only for iOS with:
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
in order to fix this hidden header? Is there a plugin for that?
1st) you detect which os your client using:
osInfo.ios = navigator.userAgent.match(/(iPhone|iPod|iPad)/);
osInfo.android = navigator.userAgent.match(/Android/);
osInfo.blackberry = navigator.userAgent.match(/BlackBerry/);
2nd) you apply CSS so it will fix the position for iOs
if(osInfo.ios)
{
//something here
}
P.S. hope I understood you right

Categories