Viewport and Fullscreen (Android/Chrome)

[Glasspoole]

Hi,

i never did something for mobiles and now I’m trying to build a panel for home automation.
I don’t get this viewport thing. My device is 1280x720 and i did set the html tag to the same size/resolution.
If i don’t set the meta viewport the site fills exactly the screen.
But i don’t want somebody to zoom and did set “user-scalable=no”.
But then the site is allot bigger then my screen?
I played with: device-width, initial-scale, maximum-scale and nothing helps.

Why is the site bigger then the screen if i set device-width?
And is there a way to hide the Android status bar after i did “Add to homescreen”?

[PaulOB]

@Glasspoole

If i don’t set the meta viewport the site fills exactly the screen.

If you don’t set the meta viewport tag then the device will simply assume a standard width (usually 960px/980px) and then scale that to fit the device. This varies by device but effectively means that your site will be scaled to fit and thus not at its correct size. media queries will then not be trggered at the expected widths because the site has been scaled.

You 'must always include the viewport meta tag’ when you are catering for mobile. If you are not specifically catering for mobile only then omit the viewport meta tag and let the device make a best guess.

@Glasspoole

My device is 1280x720

That is the resolution of your device and its probably double density which would equate to a viewport size of 640px x320px.

You should not be designing for a specific width as there are too many devices to cater for. What you want is a site that fits the screen no matter the size and you do this by creating fluid (not fixed width) sites and making sure the content fits. If at any point the content doesn’t fit then you adjust with media queries to make it fit. You can do this all on the desktop by simply opening and closing the width of the browsers and checking your design.

You need a fluid width (or a max-width) and then create elements that can stretch or shrink as much as possible. If at any point things don’t fit then you throw in a media query and make them fit better (either by changing the design or moving things around a bit).

@Glasspoole

But i don’t want somebody to zoom and did set “user-scalable=no”.

You mean you don’t want the majority of users to be able to see your site? You should never disable zoom unless you have built a purpose made app and used large text sizes all the way through. As a rule of thumb never mess with users expectations and zoom is one of the most important. I cannot use any mobile unless I can zoom the text.

So to recap

1. Add the meta tag. This one:

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

2. Do not set fixed widths on your layout. Use 100% (or a percentage) or perhaps better set a max-width of say 1280px and then let the page scale smaller.

3. The resolution of the device is not the width available for you to use.

e.g an Iphone 6 plus has only 414px x 736px room to play with although its resolution is 3 times that amount.

If you have chrome them call up the devtools and click the mobile icon at the top and then you can select various phones from a dropdown and see the real size that they render at.

[Glasspoole]

Thanks Paul, i will look into it.
But there is something you did not read: “I’m trying to build a panel for home automation.”
It’s one device at home on the wall. If it would be a website or app then sure i would not make it fixed and disable zoom.

[PaulOB]

@Glasspoole

I’m trying to build a panel for home automation."

lol - I had no idea what that was and glossed over it Sorry.

You will need to find out what the device supports exactly. If the device is a tablet/ipad or laptop size then the width probably will match the resolution but if you use the meta tag I gave you then the width will fit the device so you can easily test if things match up. You don’t want to set an explicit width as that will confuse things especially if you don’t know what the width of the device is. If you set an explicit width and the device is double density then it will be too big,

[Glasspoole]

Sorry but i don’t get that density thing. Is it ppi what we are talking about?
On a desktop 1920x1080 is what it is. If i make something that big it exactly fills the screen.
Is there somewhere an explanation out there in the www? If i look for viewport then all i get is what you should put in the header put no technical explanation.

Hm you wrote a Iphone 6 plus shows only 414 x 736. But isn’t that consumer cozen?
The company’s advertise high ppi and then i only see 736px?

[PaulOB]

@Glasspoole

On a desktop 1920x1080 is what it is.

Yes on most desktops the resolution matches the available width but not on all as some laptops and the imac have double density displays but map them to device independent pixels.

These are old articlea but explains the original concept.

A pixel is not a pixel is not a pixel - QuirksBlog

http://quirksmode.org/mobile/viewports2.html

And another article here.
https://www.smashingmagazine.com/2012/08/towards-retina-web/

The point being that in order for content to look good on small devices you need to squeeze more device pixels into a standard css pixel and thus images (optimised for the higher display) will display much better.

If for example a small phone states that it has a resolution of 1280px and you want your 1280px site to be viewed on that phone (which is probably only 3.5 inches wide) then the site would be scaled so small no one could read it. That’s why this does not happen and each of those 1280px pixels is mapped to a normal css pixel and for double density you have a usable viewport size of 640px. You’re not interested in the physical size of the screen, but in how many CSS pixels currently fit on it.

The question you need to ask is what content width fits on your device and then design your site to match that width assuming you are designing only for this one special case device I’m guessing you have a double density device but maybe it is a laptop or large tablet that is not double density. You can easily find out by adding the meta tag I have shown above and testing out on some dummy content to see how it fits.

[Glasspoole]

Ok, the problems are my images. It seems the old rules don’t apply anymore where it was bad practice to not set height and width for an image. There is Adaptive Images, HiSRC and and and…
Damn was that easy when there only where desktops. 3 Years no web design and nothing works anymore *lol

I did setup a VM for Chrome (no way i put Google stuff on my workstation ). And now i see if i choose iPhone 6 Plus that if i set the image to width 100% that it scales (still to high put a starting point).

I found http://viewportsizes.com/mine/ and on my 5" Siswoo Cooper i7 it tells me 640x335.
But that is with the Android status bar. I now need to figure out how to get rid of that bar.

I don’t know yet what phone it will be in the end. Some Chinese stuff for ~70$.
It’s the touchscreen for the front door (bell, RFID, fingerprint reader, VoIP) and I’m trying to recreate Gerty from Moon.

Thanks for the help Paul!

[PaulOB]

@Glasspoole

But that is with the Android status bar. I now need to figure out how to get rid of that bar.

I think you can only do that if you are building an App which is beyond my area of expertise and more a question for the mobile forum than the css forum (although the mobile forum is pretty quiet).

@Glasspoole

It seems the old rules don’t apply anymore where it was bad practice to not set height and width for an image.

You should still set the height of the image in the html attributes but you can then over-ride them in the css. The browsers still needs to know the original image size in order to work out how to scale the image efficiently.

For retina and double density displays you need to create higher quality images. Basically you create an image double the size you initially want in your paint package and then scale the size down to half size in the browser thus giving you double density (you can’t just take a small image and scale it larger in your paint package because you lose quality - you have to start with the hi-res image first).

@Glasspoole

Thanks for the help Paul!

I think you may need more advanced help than I can give as I am strictly CSS

Good luck.

[Glasspoole]

With JS and making the page a “Home Screen webapp” you can remove the status bar:

Creating Immersive Experiences with the FullScreen API [Article] | Treehouse...

But it needs user action (mouse click, key press).
Since i control what is shown on the screen with MQTT from an Arduino i guess i also have to send something to invoke the fullscreen request.

Through some sites i found out:
Device Pixel Ratio 2.0
-webkit-min-device-pixel-ratio 2.0
min-resolution (dpi) 192dpi
min-resolution (dppx) 2.0dppx

If i set initial-scale=0.5 it’s close but not the height.
I tried content=“height=device-height” and content=“height=335” but that changes nothing.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="height=device-height, initial-scale=0.5, user-scalable=no">
<link rel="stylesheet" href="./design/css/reset.css">
<style>
html {
  background: url(./design/img/back.png) 0 0 repeat-x fixed;
  background-size: 1280px 720px;
}

body {
  position: relative;
}
</style>
</head>
<body>
<div style="position:absolute; width:1280px;">
  <img src="./design/img/gerty-head.png" style="position:absolute; left:80px;"/>
  <img src="./design/img/gerty-face-smile.png" style="position:absolute; top:165px; left:405px;"/>
</div>
</body>
</html>

[PaulOB]

@Glasspoole

If i set initial-scale=0.5 it’s close but not the height.

If you set initial scale to 0.5 then that’s the same as scaling the page by half so you may as well do it right from the start with the correct size. You don’t need to mess with the meta tag at all from what I gave you.

@Glasspoole

html {
background: url(./design/img/back.png) 0 0 repeat-x fixed;
background-size: 1280px 720px;
}

You are setting 1280px x 720 but your device is 640 so 1280px will never fit.

If you simply set the background-size to cover (background-size:cover) then the image will cover the viewport no matter what its size is.

Don’t set specific widths either unless you are certain the one device you want to support is that width. Just use auto widths and avoid absolute positioning.

Usually the use of absolute positioning suggests a certain naivety in laying out pages and things like top:165px and left:80px are considered magic numbers and unlikely to be true for all cases. Of course you may have a valid use for the techniques you are using as I am only going from that little snippet but it is wise to be careful.

Even when designing for a specific device you still want to be as device agnostic as possible.

I can’t help with the ‘app’ aspects but laying elements out with CSS is much the same for mobile or desktop.

Maybe if you had a drawing of what you wanted to achieve then we could suggest some ways of laying it out to start with.

[Glasspoole]

I have to play more to figure out how this stuff works. I made a blank page with just a enter and a exit fullscreen button.
The status bar is gone but i realized that zooming is also off by default.
If i understand it right then fullscreen is WebView: http://developer.android.com/reference/android/webkit/WebView.html
And:

When your page is rendered in a WebView, it does not use wide viewport mode (the page appears at full zoom) by default.

from here: http://developer.android.com/guide/webapps/targeting.html
So i need to check what kind of resolution that thing is if in WebView.
And then there are Web Apps what seems to be another thing then WebView:
http://developer.android.com/guide/webapps/best-practices.html
That’s really confusing *lol

And “background-size:cover” does not repeat the 1px image. I then have a light blue background only.

You can see the drawing in the screenshot.
I made Gerty’s head (just the orange ball) and different faces like:

The background is everywhere the same and just 1px repeated.
Everything is one page and from the microcontroller i send the commands to hide or view the different divs.
So Gerty is one div plus the different facial expressions.
Then there is one div with the bell buttons (and later others).
So all i need to do in JS is “removeClass(“hide”)” and “.addClass(“hide”)”.

Sorry if there’s a bit misspelling - I’m German.

And for those who don’t know Gerty:
https://www.youtube.com/watch?v=YQnqTjhv1h8

EDIT
Ok the viewport is 640x360 - the half of the 1280x720 display.
This works:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="./design/css/reset.css">
<style>
html {
  max-width:640px;
  background: url(./design/img/back.png) 0 0 repeat-x fixed;
  background-size:640px 360px;
}

body {
  position: relative;
}
</style>
</head>
<body>

<div style="position:absolute; max-width:640px;">
  <img src="./design/img/gerty-head.png" width="1120" height="720" style="width:560px; height:360px; position:absolute; left:40px;"/>
  <img src="./design/img/gerty-face-smile.png" width="466" height="278" style="width:233px; height:139px; position:absolute; top:100px; left:203px;"/>
</div>

<button id="fs-doc-button" style="position:absolute;">Enter Fullscreen</button>

<script src="./design/js/libs/jquery-2.2.2.min.js"></script>
<script>
$(document).ready(function () {

var requestFullscreen = function (ele) {
	if (ele.requestFullscreen) {
		ele.requestFullscreen();
	} else if (ele.webkitRequestFullscreen) {
		ele.webkitRequestFullscreen();
	} else {
		console.log('Fullscreen API is not supported.');
	}
};

var fsDocButton = document.getElementById('fs-doc-button');
fsDocButton.addEventListener('click', function(e) {
	e.preventDefault();
	requestFullscreen(document.documentElement);
});

});
</script>
</body>
</html>

I will improve the CSS later. But now i first do the fun part: making Gerty talk when somebody rings the bell

[PaulOB]

@Glasspoole

I will improve the CSS later. But now i first do the fun part: making Gerty talk when somebody rings the bell

Good luck and glad you are starting to make progress