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">
Related
This is a test page mentioned in Google web dev responsive design article for testing the viewport meta tag:
https://with-vp-meta.glitch.me/
There is a strange behavior observed when testing with chrome dev tools responsive devices in devices with very low width (at least below 320px)
If you keep on reducing the width, there comes a point where the html body width is not equal to the device pixel width anymore (though it should be equal as per the width=device-width value).
It looks like this:
As you can see, the body tag is selected in the Elements panel. The size of the selection is much less than the 81px device width as mentioned in the dev tools device header (81 x 711)
If you look at the dimensions in computed styles: the dimensions are mentioned as 81px width
This is a real issue, actually happening with my website (on not so smaller width), and this is just an example to recreate it easily.
I suspect this has something to do with the viewport meta tag and it's handling, but i am not able to pinpoint what the problem is. I have tried different combinations of width and initial-scale to recreate this scenario in other dimensions, but wasn't able to recreate a scenario where the rendered body width is less than the viewport width, but devtools inspect still shows the dimensions as correct, although the rendered dimensions do not match the pixel dimensions?
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.
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
In my app I use Bootstrap and I set 2rem to my h2 element and 1.7rem to my h3 tag. Even if I adjust the browser width in my desktop (to the size of a mobile) the h1 is bigger than h3 which is what I want. But if I use the developer tools to switch to a mobile device view or view the site from my phone the h1 becomes smaller than the h3! What might be happening in here? It happened in multiple sites I created.
Example fiddle (Could not replicate the issue in the fiddle. But it's the code) : https://jsfiddle.net/gor87kg6/1/
The live site which have the issue : http://jayatours.lk/
Following the Bootstrap mobile first approach I noticed your website was not utilising the viewport meta.
Try adding the following to the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Background Information:
Mobile browsers render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page.
Viewport Information:
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)
I believe this may be the cause of your issue as the use of rem seems to be correctly implemented. It might be more likely down to the dpi/ screen resolution of the mobile/ tablet device itself.
rem is a unit relative to the font size of the base (html) tag. The default in browsers is usually 16px if you haven't explicitly declared it. Perhaps the mobile browser has a smaller default?
Try setting the base font size before using rem units:
html { font-size: 16px; }
I don't see any issue. If you still see the issue then there could be 2 ways to resolve this:
1) See that the h1 font-size is not being set again in the media query
2) Check the base font applied to the html & whether it is being reset in the media query
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.