3 ms·

Not true. Check out CSS media queries.

by subbz 8y ago

pasta 8y ago
And grid for repositioning blocks
H1Supreme 8y ago
I'll second this. FlexBox + CSS Grid with the appropriate media queries can handle just about every layout configuration you can throw at it.
Beldin 8y ago
When i checked those, searching uncovered statements that most smart phones are lying. Which would explain why my tests never worked in my phone. Maybe I've been led astray, but from what i gathered about a year ago, media queries cannot distinguish between desktop and phone, you need JS to do this. Please tell me I'm wrong about that (at least, if you give me a hint on how to do it).
- craigzucchini 8y ago
  You're right, but often your problem is better served by a different strategy, because doing web design based on device type is kind of unsustainable.
- aykutcan 8y ago
  you are right. Css media queries are for viewport's resolution and some simple "media" types. Device type determination requires calculations on string (user agent). you cannot determine what devices are with css only. But a backend can. You can divide your app and serve seperate designs by user agent etc.
- tobyhinloopen 8y ago
  Media queries combined with the viewport meta-tag solves your problem. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> Using that meta-tag, phones will respond to media queries around 240-360 pixels, depending on their screen size. I like to use bootstrap to not be bothered with media queries myself. But I only use small parts from bootstrap, and I opt-in/opt-out from specific parts by removing/adding includes to specific modules from bootstrap. (you can do that with the LESS or SASS version of the package, copy the generic "imports" file, and comment-out everything you don't want/need) Bootstrap includes many sane defaults and some fixes for weird browsers. By choosing what to include and what not to include, I can choose whether I want bootstrap's opinionated styles or my own, and I can switch later (start out with bootstrap forms, customise them later & finally remove bootstrap form styles)

Not true. Check out CSS media queries.

by subbz 8y ago

Not true. Check out CSS media queries.

pasta 8y ago

And grid for repositioning blocks

H1Supreme 8y ago

I'll second this. FlexBox + CSS Grid with the appropriate media queries can handle just about every layout configuration you can throw at it.

Beldin 8y ago

When i checked those, searching uncovered statements that most smart phones are lying. Which would explain why my tests never worked in my phone. Maybe I've been led astray, but from what i gathered about a year ago, media queries cannot distinguish between desktop and phone, you need JS to do this. Please tell me I'm wrong about that (at least, if you give me a hint on how to do it).

craigzucchini 8y ago
You're right, but often your problem is better served by a different strategy, because doing web design based on device type is kind of unsustainable.
aykutcan 8y ago
you are right. Css media queries are for viewport's resolution and some simple "media" types. Device type determination requires calculations on string (user agent). you cannot determine what devices are with css only. But a backend can. You can divide your app and serve seperate designs by user agent etc.
tobyhinloopen 8y ago
Media queries combined with the viewport meta-tag solves your problem. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> Using that meta-tag, phones will respond to media queries around 240-360 pixels, depending on their screen size. I like to use bootstrap to not be bothered with media queries myself. But I only use small parts from bootstrap, and I opt-in/opt-out from specific parts by removing/adding includes to specific modules from bootstrap. (you can do that with the LESS or SASS version of the package, copy the generic "imports" file, and comment-out everything you don't want/need) Bootstrap includes many sane defaults and some fixes for weird browsers. By choosing what to include and what not to include, I can choose whether I want bootstrap's opinionated styles or my own, and I can switch later (start out with bootstrap forms, customise them later & finally remove bootstrap form styles)