f



CSS Viewport units - useable?

Just starting out on a new version of a lamentably out-of-date page (as 
a slow back-burner amusement, rather than a focused project).

I want it responsive, so I'll be designing initially for mobile, with 
large wide monitors as an afterthought.  My present concern is the 
scaling of text.  I've got the knack of getting a modern browser to 
display images at proportional size (with an upper bound of 100%) and I 
want to do the same with text.  A friend here pointed out the 'vw' and 
'vh' units (1% of the width and height, respectively, of the viewport) 
and caniuse suggests that with a fallback for IE9 these might be viable 
(I'm not that concerned at what things might look like for site visitors 
using seriously retro browsers.)

In the past I've used media queries to adjust font-size, but this is 
necessarily in quanta, so an intrinsically proportionate unit is so much 
more attractive.  Do the good people of this group have experience of 
making this work?  Any tips?  Would I still need to use media queries if 
I wanted to limit the maximum or minimum size of the font?


-- 

Phil, London
0
Philip
7/31/2016 1:21:06 PM
comp.authoring.stylesheets 8158 articles. 0 followers. mdmoura (161) is leader. Post Follow

17 Replies
228 Views

Similar Articles

[PageSpeed] 35

Philip Herlihy wrote:

> In the past I've used media queries to adjust font-size, but this is
> necessarily in quanta, so an intrinsically proportionate unit [such as 
> “vw” or “vh”] is so much more attractive.  Do the good people of this
> group have experience of making this work?

Depends on you your definition of “the good people”.  Assuming that includes 
me, then there is at least one good person with that experience.

> Any tips?

Perhaps.  Do you have an *actual* question?

> Would I still need to use media queries if I wanted to limit the maximum
> or minimum size of the font?

Mu.  You cannot limit the maximum or minimum font-size (which you might 
mean), and the concept of proportionality to the viewport size is the 
antithesis of that.

<http://catb.org/esr/faqs/smart-questions.html>


PointedEars
-- 
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
  -- Richard Cornford, cljs, <f806at$ail$1$8300dec7@news.demon.co.uk>
0
Thomas
7/31/2016 7:19:41 PM
In article <3938718.LvFx2qVVIh@PointedEars.de>, PointedEars@web.de 
says...
> 
> Philip Herlihy wrote:
> 
> > In the past I've used media queries to adjust font-size, but this is
> > necessarily in quanta, so an intrinsically proportionate unit [such as 
> > ?vw? or ?vh?] is so much more attractive.  Do the good people of this
> > group have experience of making this work?
> 
> Depends on you your definition of ?the good people?.  Assuming that includes 
> me, then there is at least one good person with that experience.
> 
> > Any tips?
> 
> Perhaps.  Do you have an *actual* question?
> 
> > Would I still need to use media queries if I wanted to limit the maximum
> > or minimum size of the font?
> 
> Mu.  You cannot limit the maximum or minimum font-size (which you might 
> mean), and the concept of proportionality to the viewport size is the 
> antithesis of that.
> 
> <http://catb.org/esr/faqs/smart-questions.html>
> 
> 
> PointedEars

O Thomas.  Another predominantly sour post.  I do wonder about you.  Are 
you young, hurt, and angry?  Or old, disappointed, and bitter?  For it's 
evident that your so-called contributions to these pages are motivated 
more by a desire to lash out at people than a wish to set the technical 
record straight - while a wish to offer assistance plays no part.

You needn't bother.  While I'm indifferent to your barbs it does mean 
that any accompanying technical asides are invariably ignored - why 
would anyone reflect on the pronouncements of a misanthrope?  Especially 
when there are others available who simply engage in a reciprocity of 
interest and mutual help?

You must be very unhappy to be so angry with the world.  Whatever it is 
that enrages you so much about contributors to this group (and others), 
consider this:  only a fool is surprised by the same thing twice.  And 
if you find the world at large fails to live up to your lofty standards 
(er, in posting to newsgroups) then get over it.  Sigh to yourself, 
perhaps, that these muddle-heads can't see things as clearly as you can, 
but then make the key choice:  Either to continue to fight a losing 
battle (and be increasingly despised for your perceived unpleasantness) 
or see beyond the frailties of others and consider if you might actually 
be able to help someone (and perhaps end up a valued member of these 
groups).

Meanwhile, you may find life a little more satisfying if you can find 
some more directly relevant outlet for your anger and hatred towards 
people - perhaps a competitive combat sport would offer some relief?  
For injecting your sadness, anger and antipathy into a community largely 
concerned with the rendering of various codes on a screen simply makes 
you a nut, and one which most of us just ignore.  You should get some 
help.
-- 

Phil, London
0
Philip
8/1/2016 1:37:21 PM
Philip Herlihy wrote:

> In article <3938718.LvFx2qVVIh@PointedEars.de>, PointedEars@web.de
> says...
>> [full quote]

When will you learn to quote?
 
> O Thomas.  Another predominantly sour post. […]

If it is “sour” (I do not think it is), then it is only “sour” *because of 
you*.  Because apparently you are not able to ask question the smart way.  
Indeed, given the rest of your follow-up, I have to assume that you are not 
smart at all, but *incredibly stupid*, as you are actually *insulting* the 
very people that are willing to *help* you (*for free*, in their *free 
time*).  And you have wasted enough of my precious free time now.  May you 
die in ignorance.

*PLONK*


F'up2 poster

PointedEars
-- 
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
  -- Richard Cornford, cljs, <cife6q$253$1$8300dec7@news.demon.co.uk> (2004)
0
Thomas
8/1/2016 2:47:47 PM
31.7.2016, 16:21, Philip Herlihy wrote:

> I want it responsive, so I'll be designing initially for mobile, with
> large wide monitors as an afterthought.

I don�t think that�s responsiveness at all.

> In the past I've used media queries to adjust font-size, but this is
> necessarily in quanta, so an intrinsically proportionate unit is so much
> more attractive.

Why would you adjust font-size according to the dimensions of the device 
or the viewport?

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/
0
Jukka
8/3/2016 8:27:34 PM
In article <nntk3m$pbc$1@dont-email.me>, jkorpela@cs.tut.fi says...
> 
> 31.7.2016, 16:21, Philip Herlihy wrote:
> 
> > I want it responsive, so I'll be designing initially for mobile, with
> > large wide monitors as an afterthought.
> 
> I don?t think that?s responsiveness at all.

Well, opinions vary on that!  I've seen several "experts" in print or 
online pronouncing that this is the way to go, and being anything but an 
expert I simply lap it up.  Of course you're right - the ideal must be 
to have the page adapt to whatever device/viewport you happen to use to 
view it.  I guess the point these commentators are making is that 
there's been an implicit assumption that small devices are the 
'afterthought', and they are gently suggesting that's not appropriate 
these days.
> 
> > In the past I've used media queries to adjust font-size, but this is
> > necessarily in quanta, so an intrinsically proportionate unit is so much
> > more attractive.
> 
> Why would you adjust font-size according to the dimensions of the device 
> or the viewport?

I know you to be much more knowledgeable than I am in these matters, but 
I'm nevertheless surprised by your question (although I'm frantically 
wondering what daft assumptions I may be revealing).  This may well be 
something I don't understand well enough.   But here's my thinking, as 
far as it goes:

If you don't include the meta tag to prevent a mobile device from simply 
scaling everything to fit, you all too often end up with tiny unreadable 
text.  So you need to adjust font-size intelligently to keep it readable 
across a range of viewport sizes.  Maybe the user-agent sets a 
reasonable default font-size and all that's necessary is to scale up a 
bit for headings using em units (your question has certainly got me 
thinking).  But headings are both structural, content-carrying and also 
an element of design.  I've been playing with a header which (using vw 
units) maintains a constant proportion of the page across the widest 
range of viewport widths.  Body text probably needs more constraints, so 
that on wide monitors lines aren't too long (CSS columns might help 
here) and on tiny hand-held devices the characters aren't too small.  
But - as you'll have detected by now - I'm groping for the right way to 
go about this.  In another simple one-page site I've got the images 
adjusting in proportion to the viewport width (with the upper bound of 
100% of native image size) but used a whole series of media queries to 
adjust the text in a banner heading to step down in size to stay in 
proportion to the shrinking/expanding images.  It seems so much better 
to have this text track the viewport width precisely as the images do.  
Now, you can set a min-width and max-width on images, but there's no 
corresponding property for font-size.  So it'll be necessary to use 
media queries to fix font-size at both larger and smaller viewport 
dimensions.

No doubt this rambling merely confirms a confusion you may have 
suspected, and indeed my original question was rather open-ended.  I 
guess it could paraphrased - what's the best way to do this stuff?

If you got this far, thanks for your patience...

-- 

Phil, London
0
Philip
8/3/2016 10:36:42 PM
Jukka K. Korpela wrote:

> 31.7.2016, 16:21, Philip Herlihy wrote:
>> I want it responsive, so I'll be designing initially for mobile, with
>> large wide monitors as an afterthought.
> 
> I don’t think that’s responsiveness at all.

It is the “Mobile First” approach of Responsive Web Design (RWD).
 
>> In the past I've used media queries to adjust font-size, but this is
>> necessarily in quanta, so an intrinsically proportionate unit is so much
>> more attractive.
> 
> Why would you adjust font-size according to the dimensions of the device
> or the viewport?

Because it is necessary that a text increases in font-size as the viewport 
size and display resolution increases in order for the text to be easily 
readable on that device, or to be never wider than a certain viewport-
relative width *and* to not word-wrap additionally (because below it are 
positioned elements that would otherwise overlap the text).  BTDT.

The CSS Specification on the viewport-related lengths should provide further 
details.


PointedEars
-- 
var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
)  // Plone, register_function.js:16
0
Thomas
8/4/2016 5:02:14 PM
4.8.2016, 1:36, Philip Herlihy wrote:

> In article <nntk3m$pbc$1@dont-email.me>, jkorpela@cs.tut.fi says...
>>
>> 31.7.2016, 16:21, Philip Herlihy wrote:
>>
>>> I want it responsive, so I'll be designing initially for mobile, with
>>> large wide monitors as an afterthought.
>>
>> I don?t think that?s responsiveness at all.
>
> Well, opinions vary on that!  I've seen several "experts" in print or
> online pronouncing that this is the way to go, and being anything but an
> expert I simply lap it up.

If “responsiveness” means anything useful, it means designing an 
application or a web page or site so that it adapts to essentially 
different browsing environments by changing its appearance structurally 
(for example, changing between 3-column, 2-column, or 1-column 
rendering). Designing “for mobile” at least initially may be a good 
idea, but it’s not responsiveness. It may be combined with 
responsiveness by using techniques that send different renderings to 
essentially differently-sized devices, for example.

 > Of course you're right - the ideal must be
> to have the page adapt to whatever device/viewport you happen to use to
> view it.

Well, that’s a different issue. If you create a web page with very 
minimal structure and styling, just setting some max-width on text, you 
meet that ideal easily. Problems arise when pages have mixed ingredients 
and complex structure and layout, like a navbar here and there, an ad 
bar over there, four columns for the content, and so on. Then you need 
to take extra measures and to think how to modify that in small devices 
and very small devices.

>> Why would you adjust font-size according to the dimensions of the device
>> or the viewport?
>
> I know you to be much more knowledgeable than I am in these matters, but
> I'm nevertheless surprised by your question (although I'm frantically
> wondering what daft assumptions I may be revealing).

The question itself is more important than any answers to it.

Suppose that we are not talking about web pages but about newspapers. 
Suppose that a newspaper will be printed in very different page sizes, 
ranging from a postcard to a wall. Would you make the font size depend 
on the page size? Why? My eyesight does not get magically better just 
because I’m reading the postcard version. People reading the wall 
version do not necessarily read it from a distance of several meters; 
they might actually to be very close to the wall.

Since we are really talking about digital devices, it is a bit 
different, but not that much. I keep my phone closer to my eyes than my 
tablet, which is keep closer than my desktop screen. Still, I expect the 
browsers to use default font sizes that are sensible for their normal 
use. A second-guess by an author may seriously disturb this rather than 
make any improvement.

> If you don't include the meta tag to prevent a mobile device from simply
> scaling everything to fit, you all too often end up with tiny unreadable
> text.

This is true, and a sad story. Pages that fully adapt to the 
characteristics of the rendering medium may be displayed in a distorted 
way, based on the principle that most web pages have been designed for 
desktop screens and therefore need scaling on smaller devices. We need 
to sing the magic incantation

  <meta name="viewport" content="initial-scale=1.0">

to avoid that. We can’t even use CSS for this but need to resort to an 
HTML kludge.

> So you need to adjust font-size intelligently to keep it readable
> across a range of viewport sizes.

Not setting font-size at all does that. Well, mostly. If it does not, 
the user has a browser with a poor configuration, and we can hardly help 
her by making our guess.

> Maybe the user-agent sets a
> reasonable default font-size and all that's necessary is to scale up a
> bit for headings using em units

It does not always work quite that way, but it’s the most reasonable 
assumption we can make. The most common practical problem is that 
desktop browsers tend to have a default font size that is somewhat too 
large for most people, for the fonts commonly used on web pages. But 
that’s a reasonable risk to take. Still, I would not blame too much an 
author that sets font-size for body to 90% or even to 80%. It will 
probably make the text esthetically better for the majority of desktop 
users without seriously hurting the considerable minority that will find 
the result somewhat too small (and can fix the situation by increasing 
the font size if they know how to).

> But headings are both structural, content-carrying and also
> an element of design.  I've been playing with a header which (using vw
> units) maintains a constant proportion of the page across the widest
> range of viewport widths.

I’m not sure I follow... you set the font-size in vw units, and expect 
this to result in a particular width? But font-size relates to the 
height of the font, not to the widths of letters – they vary by font, 
even for the same font size-

> Body text probably needs more constraints, so
> that on wide monitors lines aren't too long (CSS columns might help
> here)

Setting max-width should handle this. Another approach is to use two or 
more columns, one way or another, but that’s essentially more 
complicated, involving responsiveness in the true sense I described.

> In another simple one-page site I've got the images
> adjusting in proportion to the viewport width (with the upper bound of
> 100% of native image size)

Sounds reasonable and very relevant these days. However, some images 
have details that are too important to be hidden in scaling, so that in 
small devices, forcing scrolling is the lesser of evils.

> but used a whole series of media queries to
> adjust the text in a banner heading to step down in size to stay in
> proportion to the shrinking/expanding images.

That sounds unnecessary, but there might be cases where it is relevant. 
However, note that you can only set the height of the font, not the 
width of characters (directly).

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/
0
Jukka
8/4/2016 7:06:40 PM
In article <no03o0$6b2$1@dont-email.me>,
 "Jukka K. Korpela" <jkorpela@cs.tut.fi> wrote:

> Suppose that we are not talking about web pages but about newspapers. 
> Suppose that a newspaper will be printed in very different page sizes, 
> ranging from a postcard to a wall. Would you make the font size depend 
> on the page size? Why? My eyesight does not get magically better just 
> because I’m reading the postcard version. People reading the wall 
> version do not necessarily read it from a distance of several meters; 
> they might actually to be very close to the wall.

Quite right. 

Let me add or note that the web author can make it easier for people 
to read by allowing them to use text sizes they find comfortable in 
part by making so text wraps within the viewport. It is almost beyond 
a joke that when I make text tactically (meaning funny finger 
enlarging on the particular page at hand) on such as an iPad, it is 
almost invariably at the cost of having to horizontally scroll *each* 
line (or guess the endings!). The other alternative is to have text 
uncomfortably small. 

This seems a complex issue, and a browser such as Safari on an iPad 
has only "Magnify everything" (so to speak), no Zoom-Text-Only. 
Methinks that browsers need to get much more sophisticated in this 
regard, it seems hopeless having to rely on the the people who make 
webpages, most are either at a loss what to do or simply are unaware 
of the problem or just don't care, happy to get a sizeable majority of 
visitors who manage.

-- 
dorayme
0
dorayme
8/4/2016 11:35:35 PM
On Thu, 4 Aug 2016 22:06:40 +0300, Jukka K. Korpela wrote:
>  We need to sing the magic incantation
> 
>   <meta name="viewport" content="initial-scale=1.0">

Apologies for just swanning into the middle of a discussion, but last 
time I was here and we talked about that, Google required

<meta name="viewport" content="width=device-width">

Has the requirement changed? What's the difference between the two?

Or should I be including both?

Sample page: http://BrownMath.com/stat/anova1.htm


-- 
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
                                       http://BrownMath.com/
                                  http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator:      http://validator.w3.org/
CSS 2.1 spec:   http://www.w3.org/TR/CSS21/
validator:      http://jigsaw.w3.org/css-validator/
Why We Won't Help You: http://preview.tinyurl.com/WhyWont
0
Stan
8/5/2016 11:04:11 AM
In article <MPG.320e3cb52ae799e98f9dd@news.individual.net>, 
the_stan_brown@fastmail.fm says...
> 
> On Thu, 4 Aug 2016 22:06:40 +0300, Jukka K. Korpela wrote:
> >  We need to sing the magic incantation
> > 
> >   <meta name="viewport" content="initial-scale=1.0">
> 
> Apologies for just swanning into the middle of a discussion, but last 
> time I was here and we talked about that, Google required
> 
> <meta name="viewport" content="width=device-width">
> 
> Has the requirement changed? What's the difference between the two?
> 
> Or should I be including both?
> 
> Sample page: http://BrownMath.com/stat/anova1.htm

I've often seen the two in the same declaration:

<meta name="viewport" content="width=device-width"  
content="initial-scale=1.0">

I've been following a video course on Lynda.com 
(https://www.lynda.com/Developer-Mobile-Web-tutorials/Applied-
Responsive-Design/114899-2.html)

.... and the (impressive) instructor suggests that the "initial-scale" 
part is redundant, and can safely be omitted without loss of the desired 
effect.

-- 

Phil, London
0
Philip
8/6/2016 1:27:05 PM
In article <do_ray_me-B93685.09353505082016@46.sub-75-242-
165.myvzw.com>, do_ray_me@bigpond.com says...
> 
> In article <no03o0$6b2$1@dont-email.me>,
>  "Jukka K. Korpela" <jkorpela@cs.tut.fi> wrote:
> 
> > Suppose that we are not talking about web pages but about newspapers. 
> > Suppose that a newspaper will be printed in very different page sizes, 
> > ranging from a postcard to a wall. Would you make the font size depend 
> > on the page size? Why? My eyesight does not get magically better just 
> > because I?m reading the postcard version. People reading the wall 
> > version do not necessarily read it from a distance of several meters; 
> > they might actually to be very close to the wall.
> 
> Quite right. 
> 
> Let me add or note that the web author can make it easier for people 
> to read by allowing them to use text sizes they find comfortable in 
> part by making so text wraps within the viewport. It is almost beyond 
> a joke that when I make text tactically (meaning funny finger 
> enlarging on the particular page at hand) on such as an iPad, it is 
> almost invariably at the cost of having to horizontally scroll *each* 
> line (or guess the endings!). The other alternative is to have text 
> uncomfortably small. 
> 
> This seems a complex issue, and a browser such as Safari on an iPad 
> has only "Magnify everything" (so to speak), no Zoom-Text-Only. 
> Methinks that browsers need to get much more sophisticated in this 
> regard, it seems hopeless having to rely on the the people who make 
> webpages, most are either at a loss what to do or simply are unaware 
> of the problem or just don't care, happy to get a sizeable majority of 
> visitors who manage.

Thanks for this - it all seems to get more complex the more I look at 
it.  I hope I'm getting better at avoiding the problems you describe - 
I've put together a few simple pages recently which all wrap text into 
as thin a viewport as the user can squish it (or at least until a few 
fixed limits prevent further narrowing).  I've learned to use a media 
query to remove the float on an image once the remaining room for text 
is too small, and I've also learned to scale my images (within sensible 
limits) as well.  I'm less happy with getting text (particularly 
headers) to look "right" across the range of viewport widths.  I've been 
using (rather too many) media queries to adjust header fonts to 
correspond to evenly-scaling images, and I'll be experimenting more with 
vw size units to get the same sort of scaling (Caniuse suggests support 
for these is now very widespread).  Still a lot to learn.  And that's 
before I do much to get menus to adjust themselves to varying viewport 
widths.  I'm currently engrossed in an excellent video course, which is 
both solving problems (and exposing ever new ones) with each segment!

https://www.lynda.com/Developer-Mobile-Web-tutorials/Applied-Responsive-
Design/114899-2.html

-- 

Phil, London
0
Philip
8/6/2016 1:55:46 PM
In article <no03o0$6b2$1@dont-email.me>, jkorpela@cs.tut.fi says...
> 
....

Thanks (once again) for your thoughtful and considered observations on 
all this.
> 
> If ?responsiveness? means anything useful, it means designing an 
> application or a web page or site so that it adapts to essentially 
> different browsing environments by changing its appearance structurally 
> (for example, changing between 3-column, 2-column, or 1-column 
> rendering). Designing ?for mobile? at least initially may be a good 
> idea, but it?s not responsiveness. It may be combined with 
> responsiveness by using techniques that send different renderings to 
> essentially differently-sized devices, for example.
> 
>  > Of course you're right - the ideal must be
> > to have the page adapt to whatever device/viewport you happen to use to
> > view it.
> 
> Well, that?s a different issue. If you create a web page with very 
> minimal structure and styling, just setting some max-width on text, you 
> meet that ideal easily. Problems arise when pages have mixed ingredients 
> and complex structure and layout, like a navbar here and there, an ad 
> bar over there, four columns for the content, and so on. Then you need 
> to take extra measures and to think how to modify that in small devices 
> and very small devices.
> 

As I've posted elsewhere in this thread, I've been engrossed with a 
video course on this subject:
https://www.lynda.com/Developer-Mobile-Web-tutorials/Applied-Responsive-
Design/114899-2.html

That course is built around a (well-argued) assumption that there are 
actually three different device/audiences for a website:  Desktop, 
tablet and mobile.  The section on "Responsive Navigation" in particular 
presents a strategy for building three different "performances" on the 
same stage.  Of course some sites (e.g. Facebook) sniff the browser and 
connect the visitor to different pages.  I'd guess that'll be done less 
and less as responsive techniques become more familiar.

> >> Why would you adjust font-size according to the dimensions of the device
> >> or the viewport?
> >
> > I know you to be much more knowledgeable than I am in these matters, but
> > I'm nevertheless surprised by your question (although I'm frantically
> > wondering what daft assumptions I may be revealing).
> 
> The question itself is more important than any answers to it.
> 
> Suppose that we are not talking about web pages but about newspapers. 
> Suppose that a newspaper will be printed in very different page sizes, 
> ranging from a postcard to a wall. Would you make the font size depend 
> on the page size? Why? My eyesight does not get magically better just 
> because I?m reading the postcard version. People reading the wall 
> version do not necessarily read it from a distance of several meters; 
> they might actually to be very close to the wall.
> 
> Since we are really talking about digital devices, it is a bit 
> different, but not that much. I keep my phone closer to my eyes than my 
> tablet, which is keep closer than my desktop screen. Still, I expect the 
> browsers to use default font sizes that are sensible for their normal 
> use. A second-guess by an author may seriously disturb this rather than 
> make any improvement.
> 
> > If you don't include the meta tag to prevent a mobile device from simply
> > scaling everything to fit, you all too often end up with tiny unreadable
> > text.
> 
> This is true, and a sad story. Pages that fully adapt to the 
> characteristics of the rendering medium may be displayed in a distorted 
> way, based on the principle that most web pages have been designed for 
> desktop screens and therefore need scaling on smaller devices. We need 
> to sing the magic incantation
> 
>   <meta name="viewport" content="initial-scale=1.0">
> 
> to avoid that. We can?t even use CSS for this but need to resort to an 
> HTML kludge.

There is a CSS version (@viewport) of the 'viewport' meta tag, but 
Caniuse is not encouraging about it!
http://caniuse.com/#feat=css-deviceadaptation
> 
> > So you need to adjust font-size intelligently to keep it readable
> > across a range of viewport sizes.
> 
> Not setting font-size at all does that. Well, mostly. If it does not, 
> the user has a browser with a poor configuration, and we can hardly help 
> her by making our guess.
> 
> > Maybe the user-agent sets a
> > reasonable default font-size and all that's necessary is to scale up a
> > bit for headings using em units
> 
> It does not always work quite that way, but it?s the most reasonable 
> assumption we can make. The most common practical problem is that 
> desktop browsers tend to have a default font size that is somewhat too 
> large for most people, for the fonts commonly used on web pages. But 
> that?s a reasonable risk to take. Still, I would not blame too much an 
> author that sets font-size for body to 90% or even to 80%. It will 
> probably make the text esthetically better for the majority of desktop 
> users without seriously hurting the considerable minority that will find 
> the result somewhat too small (and can fix the situation by increasing 
> the font size if they know how to).

I'll take that on board - thanks.

> 
> > But headings are both structural, content-carrying and also
> > an element of design.  I've been playing with a header which (using vw
> > units) maintains a constant proportion of the page across the widest
> > range of viewport widths.
> 
> I?m not sure I follow... you set the font-size in vw units, and expect 
> this to result in a particular width? But font-size relates to the 
> height of the font, not to the widths of letters ? they vary by font, 
> even for the same font size-

This is a very (!) early draft of a new version of my ancient and wholly 
dysfunctional business website (where I also play with importing fonts 
for the first time - typography is something I really need to work on).  
It shows the header (an h1) scaling up and down with the viewport width, 
and it looks fine to me!  I'm using the vw unit, defined as "100th of 
the width of the viewport".  As the fonts I've played with seem to 
preserve their aspect ratio I'm getting what I wanted.
> 
> > Body text probably needs more constraints, so
> > that on wide monitors lines aren't too long (CSS columns might help
> > here)
> 
> Setting max-width should handle this. Another approach is to use two or 
> more columns, one way or another, but that?s essentially more 
> complicated, involving responsiveness in the true sense I described.

http://caniuse.com/#feat=multicolumn 

> 
> > In another simple one-page site I've got the images
> > adjusting in proportion to the viewport width (with the upper bound of
> > 100% of native image size)
> 
> Sounds reasonable and very relevant these days. However, some images 
> have details that are too important to be hidden in scaling, so that in 
> small devices, forcing scrolling is the lesser of evils.

Certainly - although presenting vital content in a way that requires a 
large image may be worth rethinking!
> 
> > but used a whole series of media queries to
> > adjust the text in a banner heading to step down in size to stay in
> > proportion to the shrinking/expanding images.
> 
> That sounds unnecessary, but there might be cases where it is relevant. 
> However, note that you can only set the height of the font, not the 
> width of characters (directly).

See my note above.

Thanks again for your thoughts here - I'm very unsure indeed of what I'm 
doing, and greatly value you sharing your experience of an area that 
seems something of a minefield!

-- 

Phil, London
0
Philip
8/6/2016 2:40:51 PM
6.8.2016, 16:27, Philip Herlihy wrote:

> I've often seen the two in the same declaration:
>
> <meta name="viewport" content="width=device-width"
> content="initial-scale=1.0">

That�s invalid markup; the W3C validator reports �Error: Duplicate 
attribute content�.

What happens in practice is that second content attribute specification 
is ignored. You can see this by using a browser�s inspection tools: the 
DOM contains a node where the value of the content attribute is 
"width=device-width".

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/
0
Jukka
8/7/2016 5:43:41 AM
5.8.2016, 14:04, Stan Brown wrote:

> On Thu, 4 Aug 2016 22:06:40 +0300, Jukka K. Korpela wrote:
>>  We need to sing the magic incantation
>>
>>   <meta name="viewport" content="initial-scale=1.0">
>
> Apologies for just swanning into the middle of a discussion, but last
> time I was here and we talked about that, Google required
>
> <meta name="viewport" content="width=device-width">
>
> Has the requirement changed? What's the difference between the two?

The page “Configure the Viewport” in Google PageSpeed Tools recommends 
that “pages optimized to display well on mobile devices” include

<meta name=viewport content="width=device-width, initial-scale=1">

> Or should I be including both?

To use both features, you would need to use a single meta tag as above.

Technically, width=device-width tells the browser to use the actual 
device width without automatic scaling they would otherwise apply (on 
the assumption that pages without this incantation have been designed 
for relatively wide computer screen). And initial-scale=1 tells the 
browser to use no such scaling. So it’s pretty much the same thing, but 
there are some differences in their effects (the “Configure the 
Viewport” page explains one of them), so it might be best to use both.

But this only applies if the page actually works well in a narrow 
rendering area, either by being essentially a one-column page or by 
being responsive (which pretty much means it turns to an essentially 
one-column page when the canvas is narrow).

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/
0
Jukka
8/7/2016 7:05:42 AM
On 8/1/2016 10:47 AM, Thomas 'PointedEars' Lahn wrote:
> Philip Herlihy wrote:
>
>> In article <3938718.LvFx2qVVIh@PointedEars.de>, PointedEars@web.de
>> says...
>>> [full quote]
>
> When will you learn to quote?
>
>> O Thomas.  Another predominantly sour post. […]
>
> If it is “sour” (I do not think it is), then it is only “sour” *because of
> you*.  Because apparently you are not able to ask question the smart way.
> Indeed, given the rest of your follow-up, I have to assume that you are not
> smart at all, but *incredibly stupid*, as you are actually *insulting* the
> very people that are willing to *help* you (*for free*, in their *free
> time*).  And you have wasted enough of my precious free time now.  May you
> die in ignorance.
>
> *PLONK*
>
>
> F'up2 poster
>
> PointedEars
>

I must agree with Philip, who so eloquently and pointedly responded to 
your nonsense. As for your indignant retort, I believe you wrong, Philip 
is not insulting you, he's describing you, and if you find the 
description insulting, though accurate, you cannot place the blame with 
him. More over, your initial response can hardly be characterized as 
"willing to *help*"
0
wmgill
8/14/2016 3:43:34 AM
On Sun, 7 Aug 2016 10:05:42 +0300, Jukka K. Korpela wrote:
> 
> 5.8.2016, 14:04, Stan Brown wrote:
> 
> > On Thu, 4 Aug 2016 22:06:40 +0300, Jukka K. Korpela wrote:
> >>  We need to sing the magic incantation
> >>
> >>   <meta name="viewport" content="initial-scale=1.0">
> >
> > Apologies for just swanning into the middle of a discussion, but last
> > time I was here and we talked about that, Google required
> >
> > <meta name="viewport" content="width=device-width">
> >
> > Has the requirement changed? What's the difference between the two?
> 
> The page ?Configure the Viewport? in Google PageSpeed Tools recommends 
> that ?pages optimized to display well on mobile devices? include
> 
> <meta name=viewport content="width=device-width, initial-scale=1">
> 
>                   ... So it?s pretty much the same thing, but 
> there are some differences in their effects (the ?Configure the 
> Viewport? page explains one of them), so it might be best to use both.

I'm late in saying it, but thanks! I've changed my standard header as 
advised, and that will gradually roll out to my pages as I have 
occasion to recompile them.

-- 
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
                                       http://BrownMath.com/
                                  http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator:      http://validator.w3.org/
CSS 2.1 spec:   http://www.w3.org/TR/CSS21/
validator:      http://jigsaw.w3.org/css-validator/
Why We Won't Help You: http://preview.tinyurl.com/WhyWont
0
Stan
8/20/2016 10:27:57 AM
On 14/08/2016 1:43 PM, wmgill wrote:
> On 8/1/2016 10:47 AM, Thomas 'PointedEars' Lahn wrote:
>> Philip Herlihy wrote:
>>
>>> In article <3938718.LvFx2qVVIh@PointedEars.de>, PointedEars@web.de
>>> says...
>>>> [full quote]
>>
>> When will you learn to quote?
>>
>>> O Thomas.  Another predominantly sour post. […]
>>
>> If it is “sour” (I do not think it is), then it is only “sour”
>> *because of
>> you*.  Because apparently you are not able to ask question the smart way.
>> Indeed, given the rest of your follow-up, I have to assume that you
>> are not
>> smart at all, but *incredibly stupid*, as you are actually *insulting*
>> the
>> very people that are willing to *help* you (*for free*, in their *free
>> time*).  And you have wasted enough of my precious free time now.  May
>> you
>> die in ignorance.
>>
>> *PLONK*
>>
>>
>> F'up2 poster
>>
>> PointedEars
>>
>
> I must agree with Philip, who so eloquently and pointedly responded to
> your nonsense. As for your indignant retort, I believe you wrong, Philip
> is not insulting you, he's describing you, and if you find the
> description insulting, though accurate, you cannot place the blame with
> him. More over, your initial response can hardly be characterized as
> "willing to *help*"

All you can probably know is your response to a post not the nature of 
the person posting.

Andrew Poulos




0
Andrew
8/21/2016 9:21:04 AM
Reply: