Re: accessibility and browser zoom

Px to ems is division by base font size (which isn't necessarily 16 Px).


> On Mar 1, 2015, at 4:38 AM, Attiks <attiks@gmail.com> wrote:
> 
> But you can translate the px values to ems,  just divide by 16 and it should work.  We always use ems for sizes, except the last/widest one we use px so it works well on huge screens
> 
> 
>> On Sun, Mar 1, 2015, 11:32 Alice Wonder <alice@domblogger.net> wrote:
>> It may be, but when generating picture code from a database, I don't
>> know if the image is going to use 35% of the container it is in or 100%
>> of the container it is in. That's determined by an external CSS sheet.
>> 
>> On 03/01/2015 02:23 AM, Attiks wrote:
>> > Isn't is safer to use em based media queries, those should scale correctly
>> >
>> > On Sun, Mar 1, 2015 at 10:40 AM, Alice Wonder <alice@domblogger.net
>> > <mailto:alice@domblogger.net>> wrote:
>> >
>> >     I can't test Safari.
>> >
>> >     It does the same thing in Chrome.
>> >
>> >     The media query rules for a smaller screen should fire when zooming
>> >     in to avoid horizontal scrolling, and it probably should also apply
>> >     to images in case a cropped version is used with the layout that
>> >     accompanies smaller screens, which may even want a different aspect
>> >     ratio.
>> >
>> >     So I think chrome and firefox are doing the right thing, it's just I
>> >     don't understand how to tell them to use a higher resolution version
>> >     if the pixels are there but the browser is zoomed in.
>> >
>> >     There must be a way.
>> >
>> >     On 03/01/2015 01:28 AM, Yoav Weiss wrote:
>> >
>> >         That sounds like a Firefox bug. Did you try the same with
>> >         Chrome/Opera?
>> >
>> >         If it works there, you would probably file a bug with Firefox. If it
>> >         doesn't, you should probably file a bug with both :)
>> >
>> >         On Mar 1, 2015 7:13 AM, "Alice Wonder" <alice@domblogger.net
>> >         <mailto:alice@domblogger.net>
>> >         <mailto:alice@domblogger.net <mailto:alice@domblogger.net>>> wrote:
>> >
>> >              Hi,
>> >
>> >              It is hard to find examples of the picture element online that
>> >              actually validate but I have it at this point.
>> >
>> >              Have my firefox set up and it works.
>> >
>> >              Did this test :
>> >
>> >              [picture]
>> >                 [source media="(min-width: 801px)" srcset="Camera_800.jpg"
>> >              type="image/jpeg" /]
>> >                 [source media="(max-width: 800px)" srcset="Camera_400.jpg"
>> >              type="image/jpeg" /]
>> >                 [img src="Camera_800.jpg" alt="Classic Medium Format
>> >         Camera" /]
>> >              [/picture]
>> >
>> >              (using [] instead of angle brackets)
>> >
>> >              When I shring the browser down and reload - it works, the
>> >         400 is used.
>> >
>> >              But - when I ctrl-+ to zoom in and then reload, it also
>> >         triggers the
>> >              media query, and the result is a way over-stretched 400px
>> >         version.
>> >
>> >              What is the proper way to take physical pixels into
>> >         consideration so
>> >              that people who zoom in due to visual problems don't get a
>> >         smaller
>> >              version that has been stretched?
>> >
>> >
>> >