I am using the following two methods for a responsive website.
HTML
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
CSS
img {
max-width:100%;
}
However, when it loads on a smartphone, it appears to be too zoomed in. The widest image on this website is 240px but it takes up the entire screen on an iPhone 5 which has a viewport of 640px. How do I correct this?
Thats what the viewport meta tag does. the HTML attribute:
content="width=device-width"
Instructed the browser to configure its viewport to the devices screen width - in "dips" (device independent pixels) - not physical pixels.
In the case if the iphone 5 - I believe thats 320 px. you could test this by adding this script to the bottom of your HTML
<script>
var el = document.createElement('h2');
el.textContent = window.innerWidth;
document.body.appendChild(el);
</script>
If not familiar with dips, you can think of them as approximating the pixel density of a "classic" computer monitor as a way of getting around the fact that current device screen's have different physical resolutions, so dips were created to provide a level playing field for developers.
The CSS engine will then base its calculations on the HTML element being 320 pixels wide.
In that case an image whose width is defined in CSS at 240 CSS pixels wide would take up most of the screen width.
As an aside, in order to maximumise image sharpness most leading mobile browsers are smart enough to use the full physical pixel density for displaying the image - whilst basing its size on the CSS pixels.
Related
I am using the following viewport meta in my html:
meta name="viewport" content="width=device-width, initial-scale=1
Which works perfectly for mobile devices. However, on the desktop version all assets, fonts and even the various elements are increased in size by 20%.
For example, see the image below. Even though the image is defined as being 300px by 300px in the devtools, if I take a screenshot and measure it in Photoshop it is in fact 360px by 360px.
The browser zoom is at 100%. What am I doing wrong?
/** EDIT **/
So, I found out that Windows sets the size of images and text to a default of 125%. That is why my website images and text were looking bigger. Now that I can see that is the case, how can I find a workaround so that even with the setting at 125% the images and text will display as intended? Is it even possible?
The problem is that a CSS px is not equal to a physical pixel. The definition is complicated, but in desktop browsers, the ratio between a CSS px and a physical pixel (A.K.A devicePixelRatio) is equal to the OS display scaling factor.
This is done in order to adapt to various screen resolutions and their distance to the observer. In my screen, the image in the codepen you sent is 600x600 physical pixels, because my screen is high PPI. I would have difficulty seeing text rendered with the default size in pixels.
If you really need to set the dimensions in physical pixels, you can just divide each dimension by `devicePixelRatio, but that creates accessibility concerns.
I worked it out in the end. In jQuery you can add the following to make your website display as intended:
$(document).ready(function(){
checkBrowserDpi();
}
function checkBrowserDpi(){
if(window.devicePixelRatio == 1.25 ) {
$("header, section, footer").removeClass("zoom100");
$("header, section, footer").addClass("zoom080");
} else {
$("header, section, footer").removeClass("zoom080");
$("header, section, footer").addClass("zoom100");
}
}
$(window).on('resize', function(){
checkBrowserDpi();
});
and then have two classes in your CSS file as follows:
.zoom100 { zoom: 100%; }
.zoom080 { zoom: 80%; }
In this particular case, it checks the device pixel ratio when the document is loaded and every time the window is resized and then sets the correct zoom to the header, section tags and footer for desktop browsers. You set the zoom to any tag you wish.
** EDIT **
As #D.Pardal points out this does create accessibility issues which I had not taken into consideration. That said, if you do want to mess with the devicePixelRatio then the method above works.
CSS pixel:
div.sidebar {
width: 300px;
}
css-pixel-width = device-pixel-width x 1 / Device-pixel-ratio
For example: Say, a device with 1920(w) X 960(h) device pixels and dpr = 2.
css-width = 1920 * (1 css px / 2 device px) = 960 px
Device pixel:
#media all and (max-device-width: 320px) {
....
}
Zooming factor:
When the zooming factor is exactly 100%, one CSS pixel equals one device pixel (though the upcoming intermediate layer will take the place of device pixels here.) The image below depicts that. Not much to see here, since one CSS pixel exactly overlaps one device pixel.
I should probably warn you that “zoom 100%” has little meaning in web development. Zooming level is unimportant to us; what we need to know is how many CSS pixels currently fit on the screen.The following two images illustrate what happens when the user zooms. The first shows device pixels (the dark blue background) and CSS pixels (the semi-transparent foreground) when the user has zoomed out. The CSS pixels have become smaller; one device pixel overlaps several CSS pixels. The second image shows device and CSS pixels when the user has zoomed in. One CSS pixel now overlaps several device pixels.
Question:
1) How to manage zoom levels? Does auto-scale attribute of meta tag decides the zoom level?
Viewport: It’s the area (in CSS pixels)
Wrt viewport pixel,
initial-scale sets the relation between CSS pixel and viewport pixel, as mentioned here. For example: initial-scale = 1 mean 1 CSS pixel is equal to 1 viewport pixel.
Question:
2) What is viewport pixel?
Sounds like the answerer made up that term on the spot when answering the linked question. It doesn't help that their answer (before I edited it) consisted entirely of blockquotes, giving the false impression that they cited an external source that apparently defined those terms.
CSS does not define such a term, nor does any other specification. The viewport meta tags simply change the zoom behavior of a mobile browser and don't have any meaningful effect on rendering.
Im creating a website using html and css but I was just wondering whether anyone knows the difference between text sizes on all platforms.
If i create a font-size as 20px on desktop, on mobile that would look very small and you wouldnt be able to read it so is font size usually bigger on a mobile device?
Without the correct meta tag, yes the text would be super small.
...is font size usually bigger on a mobile device?
No, not typically. As in, most sites that provide a responsive version do not tell their font-size to be 80px (or whatever) so the text is not super tiny.
Mobile devices have what is known as a device width. This device width usually packs multiple device pixels per CSS pixel. I have a Samsung Galaxy S6 that has a device pixel to CSS pixel ratio of 4:1. That means there are 4 device pixels per CSS pixel. The resolution (device pixels) of this device is 1440 x 2560, but the CSS pixel resolution is 360 x 640.
When developing a site on a desktop computer and you tell an element to be 100px wide, you're actually using CSS pixels. You probably thought it was a device pixel (as I once did) because almost all desktop monitors have a device pixel to CSS pixel ratio of 1:1.
When using a responsive meta tag, like the one below, and you tell an element to be 300px wide it will take up most of the screen's width because the element will be painted on a 360 CSS pixel wide canvas, not 1440 device pixel wide canvas (which is what happens without the proper meta tag and gives the appearance of a site being "zoomed out" on a mobile device).
<meta name="viewport" content="width=device-width, initial-scale=1">
Helpful links:
Quirks Mode, A pixel is not a pixel is not a pixel
WebPlatform Docs, Understanding CSS Units
mydevice.io - displays current device settings.
mydevice.io/devices
Hopefully everything makes sense, I tried to keep it "simple."
You are right.
Have a look at EM (element units) and REM (relative element units) for sizing elements. Also adding the following code to your header might solve your problem:
<meta name="viewport" content="width=device-width, initial-scale=1">
My site requires at least 720px width. Iphone 6 appears a resolution of 1334x750 but their browser reports 667px. Samsung S5 supposedly is 1080x1920 but the browser reports 640.
I know the screen can handle the details but I'm not sure how to get a larger resolution. I need 720px to be the minimum width so what do I do to have phones <720px to scale correctly? By scale I mean show all 720px without any scrolling
You need to start with this in the head code <meta name="viewport" content="width=device-width,initial-scale=1">
then add media queries to you css sheet that support all current devices
http://codepen.io/mlegg10/pen/JKdOaj
If I understand you correctly, you want your contents width to be scaled down to the width of the viewport. This is usually done automatically unless the code contains the following line in the head section of the page:
<meta name="viewport" content="width=device-width, initial-scale=1">
So if this is in your code, remove it. (But note that you make your page non-responsive that way, which is rather unusual nowadays!)
Concerning your observations in regard to device pixels: This has to do with "pixel density" which is important for the better display/sharpness of text (fonts) and vector graphics, as well as images if high-resolution images are supplied to the browser. For example the iPhone 6 actually has a height of 1334 physical pixels (ratio 1:2), which is however treated as 667px when it comes to CSS pixel units.
Input this in .css code before using the code design
#media only screen and (min-width:720px)
and (max-width:1336px) and (min-resolution
Quick Overview of my Problem:
I made a site for mobile, it looks great. Move on tablet it looks horrible. As in it's like 5x stretched out from left and right. Imagine your face stretched horizontally up to 4ft.
Research and Possible Solution
I had a feeling i could viewport. As I thought, if i could just SCALE the layout instead of having browser provide more width and then my layout spreading to accommodate.
Article told me that if i set viewport meta tag width=300 or anything custom then browser scales whole page to fit the current viewport's actual width so 300px would be covering 1200px, at least that's what my impression was.
However, it DIDN'T work. No matter what viewport settings I do they appear to have no effect on scaling.
What i want
I want my page to scale up. I don't want to specify every border width in em units than create dozen media query checkpoints to increase font size. Especially since my layout remains the same only it needs to scale up.
If i was going after different layouts then obviously i'd've used media queries.
I've tried this:
<meta name="viewport" content="width=300">
I solved it using some javascript
first add (i'm using jade)
meta(id="myViewport", name="viewport", content="width=device-width")
Now window.innerWidth will give correct browser width and not some arbitrary number set by browser like 960 which was being reported by chrome on 360 width phone and 2100+ tablet.
Now just check if screen is wide then limit the viewport's width that way browser will scale it up so, for my tablet, 500 pixels will take up 2100 pixels.
if (window.innerWidth > 450) {
var mvp = document.getElementById('myViewport');
mvp.setAttribute('content','width=500');
}
//- first set device width so window.innerwidth shows actual width then change accordingly.