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”?
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.
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).
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.
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.
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,
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?
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.
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.
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).
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).
I think you may need more advanced help than I can give as I am strictly CSS
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.
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.
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”)”.