I have a site which I am trying to get to sit perfectly in all devices.
I'm using media queries to specify a different layout based on the device. I have an issue with the viewport however.
My viewport tag is:
<meta name="viewport" content="width=device-width">
It sits perfectly on the iPad but on the android tablet, it seemingly ignores the meta viewport tag.
(excuse the crappy photos. iPhone camera! Using colleagues' tablet and didn't want to get into his email to send myself screen grabs)
Here is how it loads - notice how it doesn't show the zoom level correctly. It is zoomed in too far and some of the page is off the right of the screen:
when I pinch zoom out (as far as it will allow) it appears like this - This is how I want it to appear on first load before the user zooms out:
When I rotate the device, it doesn't change the display width at all so it appears at the same zoom level but with white space on either side.
Does anyone have any ideas how I can get it to behave so I can go for the weekend and consume alcohol?
Your page is being cropped because the size of your browser css pixel is larger than the size of your devices physical pixel.
Try placing this JavaScript in your header as a fix for your problem.
<script type="text/javascript">
var scale = 1 / window.devicePixelRatio;
var viewportTag = "<meta id=\"meta1\" name=\"viewport\" content=\"width=device-width, height=device-height, initial-scale=" + scale + ", maximum-scale=1, user-scalable=no\"/>";
document.write(viewportTag);
</script>
Different versions of Android handle the viewport differently.
What version of Android are you using?
Here is my lame javascript hack to fix it:
<head>
<!-- other stuff in the head tag goes here -->
<script type="text/javascript">
function viewport_to_device_width() {
// omit viewport meta tag (to force setting initial scale to full extent) by returning false
var b = true;
if (window.navigator.userAgent.match(/android 2.2/i) || window.navigator.userAgent.match(/android 2.3/i) || window.navigator.userAgent.match(/android 4.0/i)) {
b = false;
} else if (window.navigator.userAgent.match(/android/i) && window.navigator.userAgent.match(/Linux armv7l/i) && window.navigator.userAgent.match(/fennec/i)) {
b = false;
}
return b;
}
if (viewport_to_device_width()) {
// omit viewport meta tag for Android 2.2 and Android 4.0 to force setting initial scale to full extent
document.write('<meta name="viewport" content="width=device-width">');
}
</script>
<noscript>
<meta name="viewport" content="width=device-width">
</noscript>
</head>
Have you tried adding initial-scale=1.0 to your content? That should work, but if it doesn't, I might try throwing some more properties in there. You can read more about all the different viewport properties here.
Different browsers are working differently. The only browser that I can make work properly on the Nexus 7 is Dolphin, which has other problems with HTML5 buttons etc.
Related
I'm trying to find out how to render different critical css or load different stylesheets based on the viewport/device. This might be a dublicate question, but everywhere I look, the given answer seems to bee "Use media queries". But this doesn't solve the issue i'm trying to fix.
My main issue is with performance and user metrics. I want to optimize the amout of css that's being loaded. Now i've noticed some sites don't scale up/down when changing the viewport size because they only load the css for the viewport size on load. (I've noticed that the 'mobile' stylesheets are loaded when using responsive inspector mode, which leads me to think it's not the viewport size but most likely the device type or something like that)
An example of this is used by Google. For example their doodles page loads mobilestyles.css when loaded in responsive mode and styles.css when loaded on regular size:
HTML head when loaded regular view
HTML head when loaded responsive view
This doesn't seem to be dynamically altered after load with javascript in any way. How does the served html change based on the device making the request and is it possible to use this to serve/render a different <style> tag for viewport specific critical css?
I believe you are talking about how sites like Instagram and YouTube make changes on their sites while still staying on the same device. Their style, though, after resizing for PC, doesn't look like the phone's one. You might want to try this; It has worked for me till now:
This will determine whether the device is mobile or PC.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Check for Device and Change CSS</title>
<script type="module">
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
var head = document.getElementsByTagName('HEAD')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'style-for-mobile.css';
head.appendChild(link);
} else {
var head = document.getElementsByTagName('HEAD')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'general-style.css';
head.appendChild(link);
}
</script>
</head>
<body>
</body>
</html>
And, Then make two different files for CSS. One for mobile devices and then another for maybe desktop devices.
/*style-for-mobile.css*/
*{
background-color: black;
}
/*general-style.css*/
*{
background-color: blue;
}
Check these articles:
How to load CSS using Javascript? - GeeksforGeeks
How to detect a mobile device using jQuery? - StackOverflow
Try this:
<link rel="stylesheet" media="screen and (min-width: 768px)" href="desktop.css" />
<link rel="stylesheet" media="screen and (max-width: 767px)" href="mobile.css" />
Also, it might be a smarter move to make mobile css inside the regular one, using media queries, so you can avoid sacrificing 1 http request that is being used by importing the second css. :)
An example of how you can style css for different devices inside the regular css:
/* min size style*/
#media screen and (max-width:320px) {
/* put your css style in there */
}
/* middle size style */
#media screen and (min-width:321px) {
/* put your css style in there */
}
/* large size style */
#media screen and (min-width:800px) {
/* put your css style in there */
}
I wonder how to prevent the mobile phone, both iOS and Android to prevent automatic zoom when an input tag of type "color" is selected. I have seen a few solutions online but none of them fit my use case. Here is what I have found so far and my comment on them.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/>
This prevents all zoom, even manual zoom on my phone, which is not great.
Adding style="font-size:16px; to the input tag.
This doesn't work on my phone.
It looks like you need to set font-size rule when input is focused:
input[type="color"]:focus {
font-size: 16px;
}
I want that my site uoga.onclick.lt in mobile devices would be zoomed out to fit all content.
My tag is:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I tried lots of changes like changing initial-scale and other option changes, but it's still loads like this:
Device is SONY Xperia Z2, but i tried with Samsung NOTE 2 and nexus 5, the results are the same...
This did the trick
<meta name="viewport" content="width=500, initial-scale=0.2">
Tested on Sony Z2, Samsung Note 2, Samsung galaxy s5, Nexus 5.
I really don't know why content="width=device-width" didn't worked...
If you want to see the result, i changed server - uogauoga.itgirnos.lt
I know this is an old question, but I just noticed if you set the width which is larger than your screen for body or html element, the viewport won't work as expected.
e.g.
body
{
width:1080px;
}
Just came across this issue and I have similar problem as #Charlie but different solution. In my case I had pre tags that had long lines, so in fact the width of the body was large (hence similarities):
the fix:
<style>
pre {
white-space: pre-wrap;
}
</style>
I am trying to create a simple html/Javascript app for Blackberry 10. I'm having an issue with the following CSS code:
td
{
width:100px;
vertical-align:top;
}
It works correctly in Chrome on my laptop, however when I test it on my device I find the width shrinks to just cover the contents of the cell. The contents of the cell is definitely under 100px.
I have a feeling it might have something to do with how I am setting up the meta viewport.
<meta name="viewport" content="width=device-width, initial-scale=1">
Anyone know what the problem might be?
Can you try to set the viewport like this:
<script>
var meta = document.createElement("meta");
meta.setAttribute('name','viewport');
meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');
document.getElementsByTagName('head')[0].appendChild(meta);
</script>
Thanks Rick, setting min width did the trick.
td
{
min-width:100px;
vertical-align:top;
}
I want to disable Pinch and Zoom on Mobile devices.
What configuration should I add to the viewport ?
Link : http://play.mink7.com/n/dawn/
EDIT: Because this keeps getting commented on, we all know that we shouldn't do this. The question was how do I do it, not should I do it.
Add this into your for mobile devices. Then do your widths in percentages and you'll be fine:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Add this in for devices that can't use viewport too:
<meta name="HandheldFriendly" content="true" />
this will prevent any zoom action by the user in ios safari and also prevent the "zoom to tabs" feature:
document.addEventListener('gesturestart', function(e) {
e.preventDefault();
// special hack to prevent zoom-to-tabs gesture in safari
document.body.style.zoom = 0.99;
});
document.addEventListener('gesturechange', function(e) {
e.preventDefault();
// special hack to prevent zoom-to-tabs gesture in safari
document.body.style.zoom = 0.99;
});
document.addEventListener('gestureend', function(e) {
e.preventDefault();
// special hack to prevent zoom-to-tabs gesture in safari
document.body.style.zoom = 0.99;
});
jsfiddle: https://jsfiddle.net/vo0aqj4y/11/
This is all I needed:
<meta name="viewport" content="user-scalable=no"/>
To everyone who said that this is a bad idea I want to say it is not always a bad one. Sometimes it is very boring to have to zoom out to see all the content. For example when you type on an input on iOS it zooms to get it in the center of the screen. You have to zoom out after that cause closing the keyboard does not do the work. Also I agree that when you put many I hours in making a great layout and user experience you don't want it to be messed up by a zoom.
But the other argument is valuable as well for people with vision issues. However In my opinion if you have issues with your eyes you are already using the zooming features of the system so there is no need to disturb the content.
I think what you may be after is the CSS property touch-action. You just need a CSS rule like this:
html, body {touch-action: none;}
You will see it has pretty good support (https://caniuse.com/#feat=mdn-css_properties_touch-action_none), including Safari, as well as back to IE10.
Unfortunately, the offered solution doesn't work in Safari 10+, since Apple has decided to ignore user-scalable=no. This thread has more details and some JS hacks: disable viewport zooming iOS 10+ safari?
Found here you can use user-scalable=no:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
IE has its own way: A css property, -ms-content-zooming. Setting it to none on the body or something should disable it.
Disable pinch to zoom in IE10
http://msdn.microsoft.com/en-us/library/ie/hh771891(v=vs.85).aspx
Disables iOS pinch-zoom
window.addEventListener(
"touchmove",
function (event) {
if (event.scale !== 1) {
event.preventDefault();
event.stopImmediatePropagation();
}
},
{ passive: false }
);
Tested on iOS 15.3 in Safari and Brave.
Try with min-width property. Let me explain you. Assume a device with screen width of 400px (for an instance). When you zoom in, the fonts gets larger and larger. But boxes and divs remains with same width. If you use min-width, you can avoid decreasing your div and box.
Not sure is this could help, but I solved the pinch / zoom problem (I wanted to avoid users to do zooming on my webapp) using angular hammer module:
In my app.component.html I added:
<div id="app" (pinchin)="pinchin();">
and in my app.component.ts:
pinchin() {
//console.log('pinch in');
}