10 replies to this topic

[Hans G.]

Hi all. We recreated our client's home page from asp to CSS. The client is happy but the old asp page fit perfectly on a droid screen. The new CCS page doesn't. Here's the old page:

continuitycenters.com

How can we make the CSS page fit into a droid screen? Is there some code to do this?

H

[chrishirst]

From ASP to CSS????

ASP is a serverside code framework not something that can be replaced with CSS?

Is it just that you now style the HTML structure using CSS rather than whatever HTML you previously used?

If so,

http://www.w3.org/TR...3-mediaqueries/

http://www.alistapar...ive-web-design/

http://css-tricks.co...-media-queries/


I do find it rather curious and rather ironic that documents built using so-called "responsive web design" are unbelievably SLOW, you could have time to make a brew before Chris Coyier's documents finally render

[Hans G.]

Look at the old page on an android device: continuitycenters.com

My new page, which is done completely in CSS, does not auto fit into the droid screen, yet they are built using the same dimensions. I want to know if there is a way to make a CSS/HTML site do that.

H

[Jill]

What about creating a mobile style sheet?

[chrishirst]

Oh! I forgot to include this link

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

All I have done in HTML in the past six or seven years have ALL behaved perfectly well on ALL devices I have tried no matter what the physical screen size is, from a 4.3 QVGA of the Nokia N95 to a 7" Android Tablet.
And all I do is use CSS to specify the layout of the HTML elements. What I use are RELATIVE dimensions (%,em & ex). This also allows the zooming of touch screens to function correctly.
Try www.modtalk.co.uk with any device you wish to use.

There is no magic fix and the "responsive design" fad at the moment isn't all it is chraiched (cracked) up to be. (IMO)

[piskie]

Chris
From what you say, do I gather that Font Sizes by the Pixel or Point don't Zoom on some platforms ??

[chrishirst]

Points are printer sizes NOT screen sizes, 1point = 1/72 of an inch, which is meaningless for a screen dimensioning.

But yes pixels and points do not zoom or if they do zoom they don't do it particularly well.


You also have to be aware that there are TWO kinds of pixels, screen pixels and CSS pixels, and the graphics engine on the video card in the hardware that the document is being displayed on has the task of calculating the screen pixels arrangement in "twips" (a twip being 1/1440 of an inch ) that correspond to the CSS pixels sizes that the browser rendering engine has sent to the system.

Using relative dimensioning allows the browser rendering engine to give a scaling factor in to the hardware, rather than it sending exact sizes and making the hardware do all the "twips to pixels" mathematics.

Just as an aside, twip scaling is one reason why Mac graphics are superior to PC graphics.

Edited by chrishirst, 22 June 2012 - 09:51 AM.

[piskie]

Thanks for that Chris.
I don't use point myself, but frequently come across them on older sites.
As for relatives like em or % what are they relative to ??

What do you set the global font size for the relative operator to work on.
Surely that has to be pixels otherwise they are likely to be set to the Browser Default. Now that would make layout unpredictable to an extent that a lot of designs might break with unpredictable overlaps or white space.

[chrishirst]

As for relatives like em or % what are they relative to ??

Ah, great question.

the quick answer is, they are relative to the inheritable properties from the immediate ancestor (parent element). However with the property cascade it does get more involved than that.

The body element is the ultimate arbiter of inheritance, so if you set a body font-size of 18px that will become the size for 1em/1ex, but you must be aware that when using relative dimensions, if you have set the parent element to say, 0.3em and explicity set a child to 0.3em as well, the child font size will become ~1/3 smaller than the parent and NOT 1/3 of 1em.

Edited by chrishirst, 23 June 2012 - 04:19 AM.

[piskie]

Thanks Chris, that's just as I understood it to be.
I have however been setting the Body to in most cases 14px in either Verdana or Tahoma.
Then when any other size was needed I would define that in pixels. Of course, it's only relatively recently that the need to factor in Android and the like which employ smaller displays with zooming.

With my approach above, I had not noticed any visibility degradation, but of course I had not increased my range of platform testing to keep up with the rapid expanse of hand-helds. My only testing in that direction was to ask someone else to visually validate on their ipad or Android etc. Getting a "that looks fine" being as accurate an evaluation as could be expected.

[Hans G.]

Thanks all - for your help!