> Le 26 avr. 2015 à 09:32, Erik Visser <e...@erikvisser.net> a écrit :
>
> @media screen and (max-width: 760px) {
> @media screen and (max-width : 960px) {
> @media screen and (max-width: 1152px) {
> @media screen and (-webkit-min-device-pixel-ratio : 1.5), screen and
> (min-device-pixel-ratio : 1.5) {
>
> Will this do for most commonly used mobile devices?
> Here in Holland these will be iPads and the majority of mobile phones from
> samsung and apple?
>
> If not, which devices (screen-sizes) should I address too?
Whatever fits _your_ design / layout / content (particularly as you’re
retrofitting an existing site).
Open your site in a desktop browser, then start narrowing the window and see at
which width your site falls apart or becomes too crammed to read or use nicely,
check the width of the window (e.g. use the developer tools in your browser to
check the computed width of the root element aka html`); there you have a
(first) break point at which you want to reorganise your layout a little
(lots?). Continue to narrow down your window and see at which point more
shuffling is needed – a second breakpoint. You can also use MQ’s to target
(very) large window widths.
In other words. Don’t focus too much on existing devices, see how your site
works at a variety of window widths (viewport widths).
Note - the 4th MQ in your list above is priory aimed at detecting hiDPI (aka
retina) screen resolution; mostly useful for loading higher res images.
PS - don’t forget to include a viewport meta element, else mobile devices /
tablets will default to a viewport width around 980px (iOS, other OS have
similar values).
<meta name="viewport" content="width=device-width, initial-scale=1">
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
