hello
i am putting together a web site that i would like to be virtually identical in all screen resolutions.
99% of the elements have % widths and height, rather than px measurements. so this is not the problem.
the problem i have is with font sizes.
does anyone know the best code to use change the fontsize according to the screen resoluiton?
malc
14 12661
Use smaller/larger or a percentage - see this link.
Is this a JavaScript problem?
well, i thought i would need to write a javascript to change the fontsize after finding the window.screen.width/height.
i have changed the % of the font size in my css file, but in the lower resolutions the text(in this case, links) go of the bottom of the div(which in this case is a sidebar)
i know this is not neccesarily a javascript prob, but don't really want to have to start a new thread elsewhere.
is there not a clever way that the text can be clerverly resized depending on the res size?
So you can use screen.availHeight to calculate a constant value which you can multiply with the font size.
Say for example: -
window.onload = function () {
-
document.body.style.fontSize = (Math.ceil(screen.availHeight * parseInt(document.body.style.fontSize) / 600) + 'px';
-
}
It may be a good idea to make everything relative using larger/smaller, so you only need to change a few sizes, though it depends on how the page is laid out.
For units, use relative ones so users can zoom in/out/change text size using the browser.
As for the best code, I'm not sure. Experiment with different resolutions and see which looks best. To change font size, use elem.style.fontSize=...
Edit: hey, where did those appear from? :p
thanks for all your help. i've come to the conclusion this problem is not as easy to solve as it should be just using a css percentage to make the font size proportional.
i am new to web developement, and i was wondering if this is a common problem, or are most sites developed with just a single resolution in mind?
i am new to web developement, and i was wondering if this is a common problem, or are most sites developed with just a single resolution in mind?
No, good sites are developed with all resolutions in mind. You make your code independent of resolution. It may not look exactly the same, but it looks OK in all browsers/resolutions. If you need it to look exactly the same, then you'll need to use fixed widths/sizes.
so it's like a resolution compromise?
dont forgret that browsers often resize the text to fit the user's zoom level.
firfox3 even rescales the images, so give up now trying to fit everything in one box.
besides, how can/ why should a page look the same on an iphone as a 22" monitor ?
thats why i've done all my sizes/measurements in percentages rather than pixels, it's just the text sizes that are the problem.
so am i going about this the wrong way?
am i better of doing all measurements in pixel size, and let the user adjust their resolutions?
please advice, as i am new to web design, and am very much in the trial and error stage.
also, common sense, and several sites and books, says that when you design a website, design in a low resolution,e.g 800x600, so horizontal scrolling is not needed.
but almost every website, including this one, allows horizontal scrolling at 800x600.
rather than code for a low res that fits without scroll (which pisses off people with a 22" widescreen lcd), use relative sizes for everything (%,em,cm).
overall, there is a balance of control and compatibility you must, as a designer, find for yourself.
...use relative sizes for everything (%,em,cm).
That's true, though cm would be an absolute size. You can use absolute sizes, e.g. pt, cm, in, mm, when you know the output medium, e.g. a printer. See this link.
Note that em/ex refers to the parent element for font-size. For all other properties, it refers to the element itself - see this link.
my two cents:
for my javascript console, i used a triage approach:
i made one version for 1024X768 (more than half of users last year).
i made one for anything smaller than that, and one for anything larger.
i recently made a second large version for widescreen monitors, bringing the version count to four, which seem to cover most people quite well.
i wouldnt worry about each rez (mac and win are different too), but make big, little, and wide versions, and a 1024X768 one that looks perfect for half your users.
a really simple way is to have diffrent <Style> sections for each rez, all disabled.
then use javascript to un-disable the one you need according to 'screen.width'.
the big limit ive noticed now is with scaling, not resoulution. ive been meaning to write a script that tells me how many pixels tall a 100% tahoma normal would appear. then, you could really get exact control, knowing exactly what the user is dealing with.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: kmunderwood |
last post by:
I am having trouble changing the font size when extracting xml into an
html web page.
I think it can be done so many ways, that my searches bring up examples
that I am not familiar with.
I am a...
|
by: Coder Droid |
last post by:
I'm trying my first table-less site, and I've bumped my head up against
a wall. I can't change the font size within a div.
Real quick, my style sheet has:
-------------------------------------...
|
by: lharby |
last post by:
Basic question, is this possible?
I have managed to crib a javascript function that allows the user to
increase or decrease the font size of a page. (see...
|
by: Bjoern |
last post by:
Hi all,
how can i change the Font Size of the Text in my Label.
I will change it dynamic in the code.
I tryed:
int number = 11;
label1.Font.Size = number;
But this is not possible because Size...
|
by: VB Programmer |
last post by:
How can I change the font size of a text box dynamically?
I tried this but it didn't work. It said 'Size is Read-Only'. Any other
ways around this? Here's the code:
txtDisplay.Font.Size = 10
|
by: Dave |
last post by:
How can I change the font size of a label?
I have:
Label1.Font.Size = "12"
but it's telling me that property 'Size' is readonly.
Thanks,
|
by: # Cyrille37 # |
last post by:
Hello,
Font.Size Property is readonly.
How can I change the Size of a Font ???
Thanks for your help
cyrille
|
by: _Who |
last post by:
I spent all day yesterday trying different things.
Something has happened so I can't change font size.
I have a table and in the first cell I have only text.
I tried using the cell's Style...
|
by: reyo |
last post by:
Hi,
i design a dynamic web page.infact it will be a css generator.
i have a question about visited link.
i want to change color,font-size,font-weight etc. of a link when it is visited.
when a...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
| |