I can't for the life of me find out why min-width isn't working on mobile on my website. There is probably a really basic solution to this but I can't find anything.
Basically, I have an element with this CSS:
fullscreen {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
min-width: 100%;
min-height: 100%;
}
This works perfectly on desktop browsers, at all resolutions and aspect ratios, but it completely breaks down on mobile, although when I change min-width to width, it fills the screen perfectly on desktop and mobile.
And when I use height instead of min-height, it works as expected and I can position elements with bottom on mobile, but when using min-height, it uses some arbitrary position about midway up the screen. max-width and max-height seem to work correctly as well
What's even weirder to me is that using the mobile device "emulator" on Chrome, the results seem to be totally random, sometimes working, sometimes having that midway line at the same place as my actual phone, sometimes having it in a completely different place.
My phone consistently has the midway line at the same place.
I've seen a lot of people recommend the use of the meta viewport tag, and I'm pretty positive I have it implemented correctly:
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
The ideal solution for me would be to simply replicate the same behaviour as I have on desktop on mobile, since my desktop site already works for all resolutions.
Thanks alot for your help, I've spent at least 3 hours trying to figure this one out!
EDIT: I've tried implementing the behaviour I want in JavaScript, and for some reason, it still doesn't want to work on mobile. Here is a test I made:
<!DOCTYPE html>
<html>
<head>
<title>Mobile fit test</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0">
<style>
body {
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: hidden;
}
</style>
</head>
<body>
<img id = "fit" src = 'http://placehold.it/1000'>
<script>
var image = document.getElementById("fit");
var image_width, image_height;
window.onresize = function() {
console.log(image_width, image_height);
var width = 1.0 / window.innerWidth * window.innerHeight / image_height * image_width;
var height = 1.0;
if (width < 1.0) {
width = 1.0;
height = 1.0 / window.innerHeight * window.innerWidth / image_width * image_height;
}
width *= window.innerWidth;
height *= window.innerHeight;
image.style.width = width + "px";
image.style.height = height + "px";
image.style.position = "absolute";
image.style.left = window.innerWidth / 2 - width / 2 + "px";
image.style.top = window.innerHeight / 2 - height / 2 + "px";
}
document.body.onload = function() {
image_width = image.width;
image_height = image.height;
window.onresize();
}
</script>
</body>
</html>
With this, I can still zoom, window.innerWidth and window.innerHeight do not appear to be what they're supposed to be, and it still works perfectly with any resolution and the plugin that Mileta Dulovic suggested. This is driving me nuts!
Your meta tag is looking as it should be. If you don't want the user to zoom page you can use this
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
Okay so. Media query works like this
#media screen and (min-width: 768px) {
...
}
CSS will be applied only and only on screens that have width >= 768px. On the screens below, it won't be applied.
#media screen and (max-width: 768px) {
...
}
CSS will be applied only and only on screens that have width <= 768px. On the screens above it won't be applied.
If I understand your question good you have a problem when you use min-width with the media query. That is because you never tell it what to do on smaller screens.
Also, don't put too much faith in Chrome's mobile view. It is not good in most cases.. Rather install plugin for Chrome that helps you with that.
Related
When i set width=device-width viewport property it work as - window.innerWidth changes accordingly by devices but when i change height=device-height it doesn't work - the window.innerHeight value doesn't change at all! So what is the point setting height=device-height property? I'm testing it on mobile Chrome.
Here is the code:
<meta name="viewport" content="width=640px, height=320px">
<script>
function myFunction() {
x = window.innerWidth;
y = window.innerHeight;
document.getElementById("demo1").innerHTML = "width: "+x;
document.getElementById("demo2").innerHTML = "height: "+y;
}
</script>
The effect is: width: 640 but height: 279(!). Changing it to anything else - still no results.
I currently have the following viewport for my webapp:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
The problem with using height=device-height is that it is taking in account the entire screens height. I need device-height minus the browser GUI. As it stands, the page is about 40-50px too long. I don't want to hardcode the css to be subtracted by that amount since the GUI could be changed depending on the browser, accessibility settings, etc... Anybody have a solution?
Correct, the viewport is your complete device, including GUI.
The most simple solution; just don't set the height! Use the browsers height: 100% on html, body to get the desired absolute height.
Used a combination of answers I found in threads here
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && window.innerHeight != document.documentElement.clientHeight) {
var fixViewportHeight = function () {
document.documentElement.style.height = inner + "px";
if ($("input,textarea,select").is(":focus")) {
$('body').css('position', 'static');
}
else {
$('body').css('position', 'fixed');
}
};
window.addEventListener("scroll", fixViewportHeight, false);
window.addEventListener("orientationchange", fixViewportHeight, false);
fixViewportHeight();
document.body.style.webkitTransform = "translate3d(0,0,0)";
}
I would like my webpage's viewport width to equal device-width as long as device-width > 450px, or 450px otherwise (my layout dynamically scales, but doesn't look good below 450px wide).
The following two meta tags work well on tablets, where the device-width > 450px:
<!-- uses device width -->
<meta name="viewport" content="width=device-width" />
<!-- use of initial-scale means width param is treated as min-width -->
<meta name="viewport" content="width=450, initial-scale=1.0" />
however, on phones (where e.g. device-width=320px) the former is too thin for the content; and the latter causes the browser to zoom in, so the user has to manually zoom out to see the content.
Alternatively, this meta tag works well on phones
<meta name="viewport" content="width=450" />
but doesn't take advantage of the extra width available on tablets.
Any help/ideas would be really appreciated (and if it makes a difference, I'm using GWT).
So you want to change the viewport tag's width dynamicaly .
Here you go :
<meta id="myViewport" name="viewport" content="width = 380">
<script>
window.onload = function () {
var mvp = document.getElementById('myViewport');
mvp.setAttribute('content','width=580');
}
</script>
See:http://www.quirksmode.org/mobile/tableViewport.html
Try this:
<meta id="vp" name="viewport" content="width=device-width, initial-scale=1">
<script>
window.onload = function() {
if (screen.width < 450) {
var mvp = document.getElementById('vp');
mvp.setAttribute('content','user-scalable=no,width=450');
}
}
</script>
Note that I have swapped the initial-scale=1, as I think you had it the wrong way round. You want initial-scale to be set to 1 when width=device-width, so that the page fits exactly in the window. When you set a specific viewport width, you don't want to set initial-scale to 1 (otherwise the page will start off zoomed in).
use a #media tag and css. It works wonders. Although it does not supply a minimal width to the view port, this is the preferred way to go.
Here is what I do for the viewport:
<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=yes, minimum-scale=1.0, maximum-scale=2.0">
Then I adjust the size for the panel attached to the viewPort:
#media all and (max-width: 1024px) {
/*styles for narrow desktop browsers and iPad landscape */
.myContentPanel{
width: 450;
}
}
#media all and (max-width: 320px) {
/*styles for iPhone/Android portrait*/
.myContentPanel {
width: 320;
}
}
Obviously you can have intermediate sizes too...
here's more in another example
The JavaScript code given in the other answers doesn't work in Firefox, but it will work if you remove the meta tag and insert a new one.
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
if (screen.width < 450){
var viewport = document.querySelector("meta[name=viewport]");
viewport.parentNode.removeChild(viewport);
var newViewport = document.createElement("meta");
newViewport.setAttribute("name", "viewport");
newViewport.setAttribute("content", "width=450");
document.head.appendChild(newViewport);
}
</script>
Or just always insert it in JavaScript:
<script>
var viewport = document.createElement("meta");
viewport.setAttribute("name", "viewport");
if (screen.width < 450) {
viewport.setAttribute("content", "width=450");
} else {
viewport.setAttribute("content", "width=device-width, initial-scale=1");
}
document.head.appendChild(viewport);
</script>
For my sanity, I wrote a polyfill to just add a min-width attribute to the viewport meta tag:
Set min-width in viewport metatag
With this, you could just do:
<meta name="viewport" content="width=device-width, initial-scale=1.0, min-width=450" />
<script type="text/javascript" src="viewport-min-width.js"></script>
In short, there is no need to set min-width on viewport because you can set it on body or html element instead, to make them and their content wider than viewport. User will be able to scroll or zoom out content.
body {
min-width: 450px;
}
I did some tests in Chrome for Android and it scales fonts of some elements up if viewport width is set to anything other than device-width. Also shrink-to-fit=yes is useful to have a page zoomed out initially.
Lastly, this approach supports desktop browsers that can have strange window sizes or current zoom settings (both of which affect reported viewport dimensions), but don't honor the viewport meta tag.
Extending #Brendan and other's answer. The viewport size doesn't adjust again on orientation (portrait, landscape) change. To cater this, add an event listener on orientation change and resize again.
<script>
const resize = () => {
if (screen.width < 450) {
var viewport = document.querySelector("meta[name=viewport]");
viewport.parentNode.removeChild(viewport);
var newViewport = document.createElement("meta");
newViewport.setAttribute("name", "viewport");
newViewport.setAttribute(
"content",
"width=450, maximum-scale=1.0, user-scalable=no"
);
document.head.appendChild(newViewport);
}
};
resize();
window.addEventListener("orientationchange", resize);
</script>
I just removed initial-scale=1 and perfectly working on Android Chrome and built-in browsers. No unexpected zoom anymore! :)
<meta name='viewport' content='width=device-width'>
I need to set the min width of content to 480px so that anyone viewing on a screen <= to that will have to scroll accross to view the content. The reason being for this is that it is impossible to make the layout work below this resolution.
Here's what I have
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
I need something like this but obviously this doesn't work
<meta name="viewport" content="width=device-width,, min-width=480px, initial-scale=1, maximum-scale=1, minimum-scale=1">
This is a solution to have the responsive version of a web only for tablet and desktop.
This this code we disable the mobile version dynamically. On mobile:
<!-- Meta Responsive -->
<meta id="myViewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script>
window.onload = function () {
if(screen.width <= 767) {
var mvp = document.getElementById('myViewport');
mvp.setAttribute('content','width=767');
}
}
</script>
<!-- End of Meta Responsive -->
It sounds like you are trying to set the min width of the content on the page, not the viewport itself.This article might help you out.
You are probably looking to do:
#media all and (max-width: 480px) {
// styles assigned when width is smaller than 480px;
}
Something like this, in that block you can sent the styles for content on screens that have a width of 480px and lower.
Hope that is what you are looking for.
I tried a lot of codes and achieved some good results doing a sort of realoading the viewport... But, I think that the best way is to create a full-responsive web site (up to 320px ;)
Thats the best aproach:
<script>
//VIEWPORT
function mobileFriendly() {
setTimeout(function () {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
var ww = ( document.documentElement.clientWidth < window.screen.width ) ? jQuery(window).width() : window.screen.width; //get proper width
var mw = 725;
//alert ("width" + ww);
var ratio = ww / mw; //calculate ratio
//alert ("ratio: " + ratio);
if( ratio < 1 ){ //smaller than minimum size
jQuery("meta[name='viewport']").attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + mw);
}else{ //regular size
jQuery("meta[name='viewport']").attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
}
}
}, 600);
}
jQuery( document ).ready( function(){
mobileFriendly()
});
window.addEventListener("orientationchange", mobileFriendly, false);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta content="user-scalable=yes, maximum-scale=1.6, width=device-width, initial-scale=1, target-densitydpi=device-dpi" name="viewport">
Your second solution does in fact work -- what you might not have seen is that you have 2 commas after width=device-width, which is probably why you don't have it working. I've copied it and had no problems.
Sometimes fresh eyes does it all.
Edit :
However, yes, in your case, a media query is exactly what you need.
<script>
//viewport just for screens under/with 480px width other screen widths show the whole page resized
if(screen.width <= 480) {
document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;");}
//for devices with more and less/equal than 480px width
window.onresize = changeViewport;
function changeViewport(){
if(screen.width <= 480) {
document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;");}
if(screen.width > 480) {
document.getElementById("viewport").setAttribute("content", "");}
}
</script>
How do I change the width of popup.html? I've attempted changing the width of the div in it but that seems to have no effect.
Here is what I've tried...
<div id='poppingup' style = "min-width: 300px; display:none">
Popup width is determined by the visible content, so either make your div visible or apply min-width to body:
body {
min-width:300px;
}
(there is also a limit on max width, I think it is 800px)
I tried to change the width of body too, but it didn't work. You can set the width of html tag:
<html xmlns="http://www.w3.org/1999/xhtml" style="min-width:600px;">
It worked in my project.
Changing the css didn't work for me.
You can do it with javascript:
<script>
window.resizeTo(1920, 768);
</script>
Or if you want to accomodate all screen sizes:
<script>
var newheight = window.height * (5/10);
var newwidth = window.width * (7/10);
window.resizeTo(newheight, newwidth);
</script>