I havet tried reading about making font sizes responsive and about using device-width for mobile browsers. But I just cant seem to make sense of it. The font size in proportion to the window is a lot different between mobile and desktop browsers. How can I solve this?
This is my current css for my h1:
h1 {
font-size: 3em;
}
#media (min-width: 520px) {
h1 {
font-size: 3.5em;
}
}
#media (min-width: 760px) {
h1 {
font-size: 4em;
}
}
#media (min-width: 960px) {
h1 {
font-size: 5em;
}
}
And yes, I have included this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
There are varying ways to solve this. When I can get away with it (simple layout, content-driven site) I leave 1em alone, letting the device figure out what size the text should be for it. Everything is scaled from there.
Since ems are relative measurements, you shouldn't be setting the size of your headings differently for every width of device. Set your heading at 2em or wherever you want it, and then let it scale from the base font size on body. Then, if you have to do any scaling at all, just set that base font size and the rest of the page falls in line.
I ended up using font-size:10vw instead. i'll just use a fallback to correct for lack of browser support :)
Related
I'm writing my first Phonegap app, and I'm having a bit of a headache dealing with all the different screen sizes. So, since my app is aimed only at phones I think I know how my ideal solution would work, but I'm just totally clueless as to how I would implement it.
Basically, I want the entire page to behave like an image. Rather than staying the same size and wrapping into new lines as the screen gets smaller, I want the actual font size of the text to decrease, maintaining all the spacing and proportions of the design. I've tried using only percentages to define margins, widths, font sizes, etc., but it hasn't worked exactly as I'd like.
If you want something like image that will shrink/decrease the fontsize, spacing, and proportions of design, you have to write media queries accordingly.
#media only screen and (max-width: 550px) {
.title {
font-size:11px
}
.body-box {
width:440px;
}
}
#media only screen and (max-width: 600px) {
.title {
font-size:12px
}
.body-box {
width:480px;
}
}
#media only screen and (max-width: 650px) {
.title {
font-size:13px
}
.body-box {
width:520px;
}
}
This also has some drawbacks. For very small-screen displays or low-resolution displays(around 350px), if you keep this ratio, it will be about 7px and that size is too small to read. If anyone sees on QHD tab (2160px), the font size will be 44px which will be very large.
The long term and perfect solutions to an app like yours will be to start a responsive design.
You can start designing your HTML app layout using Bootstrap. It's responsive and mobile first, and it will maintain the layout.
Otherwise you can use onsen.io framework, which is also a responsive HTML5 framework for Cordova and Phonegap.
Is there a way to scale down/up all elements including texts, images, etc. depending on the browser width? It is like 'zooming out' using your browser just to avoid the browser horizontal scrollbar.
You can resize images and video with just this css rule.
img, video { max-width: 100%; }
For text, you can work with em's to adjust to the viewport and resolution. You should also set the font size on the html and body element
html {
font-size: 100%;
}
body {
font-size: 1em;
}
/* Adjust the font size here to upscale the font when you've resized the page to 700px */
#media screen and (max-width: 700px) {
html { font-size: 110%; }
}
If you're actually thinking about literally zooming in/out for certain viewports, just use media queries. Like this:
#media all and (max-width: 700px) and (min-width: 400px) {
/* some funky stuff */
}
EXTRA
To smoothen the transition between different viewports, use this css property on the html tag
transition: all 1s ease;
Yes, though it requires JavaScript and doesn't work with all browsers, only those which support CSS zoom (which I know at least Firefox does not). How I do it, is say the standard non-zoomed page width is 1024, I use jQuery with the line
$("html").css("zoom",window.innerWidth/1024);
every time the window is resized (using window.onresize). The site I'm using it on is still non-public so I can't show you the example, but it works pretty well.
This question already has answers here:
Why are my CSS3 media queries not working on mobile devices?
(23 answers)
Closed 8 years ago.
At http://ccachicago.pragmatometer.com, I have the following media query in the stylesheet, meant to stack menu items vertically and bump up the font size:
#media (handheld, only screen and (max-width: 1023px))
{
div, p
{
font-size: 36px !important;
}
#navigation > li
{
display: block;
}
}
I want to do more than this in terms of responsive design, but right now I don't have a working smoke test. I've reloaded the page a few times, and it seems to display the menu items inline, horizontal-wise, and the text does not appear enlarged for text in P's.
How can I change the font size and block/inline display for <1024px-wide displays?
in the head of your page you need to include
<meta name="viewport" content="width=device-width, initial-scale=1.0">
this is needed so that the phone doesn't just scale the site to fit into the window.
then change your media query to the following:
#media handheld, only screen and (max-width: 1023px)
{
div, p
{
font-size: 36px !important;
}
#navigation {height:auto;}
#navigation > li
{
float:none;
width:100%;
}
}
there may be more overrides you need to do, depending on what you want the final output to be
i would even suggest using the media query as
#media only screen and (max-width: 1023px)
so you can test in your browser
The Handheld media type has become redundant as Apple & Android declare themselves as screens, I believe that the handheld media type was for older devices which had a very basic web browser.
I believe this is answered here:
media queries in responsive design
But you will also need to add a meta viewport tag to your head to prevent a mobile device resizing the site.
<meta name="viewport" content="width=device-width,initial-scale=1.0">
I make an exercise about html with several input buttons:
http://bullmalay.appspot.com/
I visit it on my mobile. But I find the text size is really small. I think the reason is about resolution.
Can anyone help me about the text size? I want it can display the similar size in my laptop.
ps.
I have searched about css:#media (min-width: 702px) and then set the font size. But I think even a small device can have a resolution high than my laptop.The size will be smaller than it display on my laptop screen.
I think the size should be: fontSize * (width per pixel of my laptop)/(width per pixel of that device). But I am not familiar about css.
Thank you all. I have learned a lot. But I find the reason myself.
The browser on mobile device will auto scale the page to adapt the mobile screen. I just add this line to the html and it works:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
You may use something like #media handheld and (max-width: 500px). But unfortunately, I don't think there's a way to use CSS like
fontSize * (width per pixel of my laptop)/(width per pixel of that device)
There is only one way so far that we know, you need to do some thing like this
#media (max-width: 300px) {
html { font-size: 70%; }
}
#media (min-width: 500px) {
html { font-size: 80%; }
}
#media (min-width: 700px) {
html { font-size: 120%; }
}
#media (min-width: 1200px) {
html { font-size: 200%; }
}
Well ther is one thing you can do, You probably want to set your font sizes in pt units (1pt = 1/72 inch), which are resolution-independent and designed to look the same apparent size in any resolution.
Try adding the below code
body{
-webkit-text-size-adjust: none;
}
Is there a way to make font-size relative to the size of the page? Applying percentage as unit refers to the standard font size (like 90% of 12px, not 90% of the page!). This is different from the behaviour of most of the other tags.
Any way to make the page 'scale up and down' also with fonts? Should I rely on em?
Thanks
See the new vh and vw CSS units. Browser support isn't great yet.
http://snook.ca/archives/html_and_css/vm-vh-units
It landed in WebKit recently:
https://bugs.webkit.org/show_bug.cgi?id=27160
In browsers that support it, 1 vh is 1% (1/100) of the viewport height, and 1 vw is 1% (1/100) of the viewport width. There are also vmin and vmax units, which represent the smaller of the two and the larger of the two, respectively.
No you cannot set the size of the font in a percentage relative to the size of the page.
Sizing in em is based on the size relative to how the font would normally render in 16 point.
If you'd like your page to scale up and down and keep some sort of scale to itself, the boxes and the font, then setting it out in em would be fine.
That method will allow for the scaling of fonts and boxes of the page to grow at a relative size to one another and hopefully not have things falling out of bounds and borders.
Try a jQuery plugin like FitText. It automatically sizes text to fit the width of the parent element.
Another jQuery plugin with the same goal is BigText (demo).
Heres a little script I made for exacly that (use it as a fallback when vw isnt supported)
https://gist.github.com/2475269
Another non-ideal answer is to use a series of css breakpoints like so:
h1 { font-size: 22px; color: orange; }
#media only screen and (max-width: 900px) {
h1 { font-size: 20px; color: blue; }
}
#media only screen and (max-width: 800px) {
h1 { font-size: 18px; color: green; }
}
#media only screen and (max-width: 700px) {
h1 { font-size: 12px; color: red; }
}
http://jsfiddle.net/8RKhp/
In my view, the range of apparent pixel densities seen by the viewer of a webpage is now massive, from an HTC One held at 12 inches from the face, where there are 5600 pixels/radians to perhaps a 50 inch plasma screen running at 480p, which is about 950 pixels/radians at 4 feet.
Or put it another way a 20px font is nearly 6x bigger in your field of view on that plasma screen than the latest handset.
The solution I cooked up was to set the body font size in absolute pixels as a multiple of the window.screenWidth but constrain it to a minimum an maximum number of units, then use em's for all font sizes after that. The em's+proper use of headings should mean accessibility is fine.
I add this function to the page (or it's JS) to set the size:
function setFontSize() {
pagesized = window.innerWidth / 30; // Proportionate font size to page
pagesized = Math.max(pagesized, 14); // Set size to be no less than 14 px
pagesized = Math.min(pagesized, 30); // & No greater than 30 px
document.body.style.fontSize = pagesized; // Set body default font size
}
To make this work the following is added to the body tag:
<body onresize="setFontSize()" onload="setFontSize()">
You then just use your CSS (or inline formatting) all based on % or em units and things should scale nicely within those bounds.
Or, in JQuery, you can do:
$(window).resize(function() {
pagesized = $(window).innerWidth() / 30; // Proportionate font size to page
pagesized = Math.max(pagesized, 14); // Set size to be no less than 14 px
pagesized = Math.min(pagesized, 30); // & No greater than 30 px
$('body').css('font-size', pagesized); // Set body default font size
});
At least for Firefox, 1em can be used to set the font size related to the font size of the parent. So if you set font-size of body to a value that is in ratio to the size of the page. All fonts under body that use 'em' as unit will be in relation to the page.
To do that, you must set the size of the body in relation to the page like height: 100% or width if you want to relate the size to the width.
Then, you will have to constantly synchronize the body height with the font size. This can be done with 'onResize'.
See more detail in the following link.
I recommend you use YUI reset to unify the font rendering across different browsers. Then check YUI Font Size. After this you can rely on your fonts to display correctly.
You can solve it like this:
jQuery(document).ready(function ($) {
// Dynamisches Skalieren von Schriften
fontSize = function(){
//ww = $(window).innerWidth();
ww = $('.mainhead').innerWidth(); // Width of the Motherelement
one = ww/100; // 1%
multiplcator = one*31;
$('.mainhead').css({'font-size': multiplcator+'px'});
}
fontSize();
$(window).resize(function() {
fontSize();
});
});
When you now set your Fontsize via css it wokes on all browsers like charm
.mainhead{
width:48%;
font: normal 2em Times, Verdana, sans-serif;
}
I know it's already been answered, but i need to share this for future comers, because it took me some precious minutes to figure this out.
So as mr #random said: em as a unit, will do the trick.
If you'd like your page to scale up and down and keep some sort of scale to itself, the boxes and the font, then setting it out in em would be fine.
That method will allow for the scaling of fonts and boxes of the page to grow at a relative size to one another and hopefully not have things falling out of bounds and borders.
Initialise your body with 1em as font-size that means 100%
body {
font-size: 1em;
}
Then set your element's font-size as a percentage of it's parent's
.your_element {
font-size:0.4em /* for example 40% if its parent font-size */
}
Now the magic of #media queries
#media all and (max-width: 767px) {
body {
font-size: 0.4em !important;
}
}
#media all and (min-width: 768px) and (max-width: 1023px) {
body {
font-size: 0.6em !important;
}
}
#media all and (min-width: 1024px) and (max-width: 1199px) {
body {
font-size: 0.8em !important;
}
}
#media all and (min-width: 1200px) and (max-width: 1599px) {
body {
font-size: 1em !important;
}
}
#media all and (min-width: 1600px) and (max-width: 1999px) {
body {
font-size: 1.2em !important;
}
}
#media all and (min-width: 2000px) and (max-width: 2999px) {
body {
font-size: 1.6em !important;
}
}
#media all and (min-width: 3000px) and (max-width: 3999px) {
body {
font-size: 1.8em !important;
}
}
#media all and (min-width: 4000px) {
body {
font-size: 2em !important;
}
}
And Bingo, have a nice day.
When you say "relative to the size of the page", what exactly do you mean with "size of the page"?
The browser window? Then your fonts would change size when the user resizes the window - definitely not what anyone would expect, and pretty bad for usability. People don't resize windows to see a larger or smaller representation of the whole site, they enlarge them to see a larger section of the site, and make windows smaller to see a specific small section and have space for other windows next to the browser.
If you mean the size of the screen, that's even worse since it would mean huge fonts on a 30" screen. But people don't buy 30" screens so they can see huge fonts, they buy them to see multiple windows side by side.
All in all, using em or something similay is the only sensible way to make a scaleable website, since it will scale relative to the default size, which is/should be relative to what the user can comfortably read.