News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Maybe in our world there lives a happy little responsive Curve2 over there

Started by Antes, April 02, 2014, 03:47:58 PM

Previous topic - Next topic

Bloc

Quote from: Dragooon on May 23, 2014, 05:12:04 PM
QuoteThen please explain. If I use ONLY media queries that search for certain widths..how can it filter out that its still a 5" device even if the width is above 1200px? By using other media query keywords to learn that?  Which ones? And how to combine those? I don't care about auto-zooming or what else mobile browsers do of tricks to make it look better, my simple need is a way to make responsive design look the way I intend to on ALL devices - not what the browser decides is the best. Thats not good design, I  might as well use Tapatalk then.
Use device-width. Seriously. That's it, use device-width.
@media (max-device-width: 320px) {
}


The above will apply even if your device has 1120 x 640 resolution (a la retina iPhone), because the browser downscales the device-width to the relevant old-fashioned width to suite the actual needs. It is not a trick, it's a proper documented css3 feature. If you want a live example, pick up a phone and go to http://getbootstrap.com.

Ok, I finally got some eye-opening moments(or rather googling lol) here and realizing what device-width is really about. I stand corrected, this is what I should use.

Akyhne

Quote from: Dragooon on May 23, 2014, 05:12:04 PM
QuoteThen please explain. If I use ONLY media queries that search for certain widths..how can it filter out that its still a 5" device even if the width is above 1200px? By using other media query keywords to learn that?  Which ones? And how to combine those? I don't care about auto-zooming or what else mobile browsers do of tricks to make it look better, my simple need is a way to make responsive design look the way I intend to on ALL devices - not what the browser decides is the best. Thats not good design, I  might as well use Tapatalk then.
Use device-width. Seriously. That's it, use device-width.
@media (max-device-width: 320px) {
}


The above will apply even if your device has 1120 x 640 resolution (a la retina iPhone), because the browser downscales the device-width to the relevant old-fashioned width to suite the actual needs. It is not a trick, it's a proper documented css3 feature. If you want a live example, pick up a phone and go to http://getbootstrap.com.
But if you're on a phone with HD res., you will not benefit from that.

Tekkla

Quote from: Antes on May 23, 2014, 06:29:27 PM
Quote from: Tekkla on May 23, 2014, 05:47:46 PM
Have you ever tried to include Bootstrap after index.responsive.css?
Nope

Quote from: Dragooon on May 23, 2014, 05:48:19 PM
Quote from: Tekkla on May 23, 2014, 05:47:46 PM
Have you ever tried to include Bootstrap after index.responsive.css?
What purpose would that serve?
Nothing :D

Quote from: Arantor on May 23, 2014, 05:49:22 PM
Mass style breakage and no responsive benefits whatsoever?
lol :P

Quote from: Tekkla on May 23, 2014, 06:13:54 PM
No mass style breakage. You can see some differences in padding and margins. And you can see differences in how SMF and BS are using html elements. Mostly in heading usage.

http://tekkla.de/pics/with_bootstrap.jpg
http://tekkla.de/pics/without_bootstrap.jpg


It's only the boardindex, but the rest of the forum isn't much more broken than this.

Because bootstrap only changed the general elements such as h3 / img etc... that picture (with bootstrap) 95% or even more only using index.css

That is my point. To make it clear: Neither do I prefer a Bootstrap based theme nor do I want to replace the style SMF is theming the forum. For me it's all about extending, getting more opportunities. When I need to use BS with SMF, it would be great to use it without harming the forum display. This is for what I argue. Nothing else.

Antes

@Tekkla I used Boostrap 2.3.x & 3.x (https://github.com/ProjectBFG/Simple-Discussions very old project), as well as MetroUI (http://metroui.org.ua/) (https://github.com/ProjectBFG/ModernUI4SMF very old project as well but concept). :P

It was pain really you can ask my project partner too @Yağız... here.

Bloc

Quote from: Alex@ on May 24, 2014, 01:45:25 AM
Quote from: Dragooon on May 23, 2014, 05:12:04 PM
QuoteThen please explain. If I use ONLY media queries that search for certain widths..how can it filter out that its still a 5" device even if the width is above 1200px? By using other media query keywords to learn that?  Which ones? And how to combine those? I don't care about auto-zooming or what else mobile browsers do of tricks to make it look better, my simple need is a way to make responsive design look the way I intend to on ALL devices - not what the browser decides is the best. Thats not good design, I  might as well use Tapatalk then.
Use device-width. Seriously. That's it, use device-width.
@media (max-device-width: 320px) {
}


The above will apply even if your device has 1120 x 640 resolution (a la retina iPhone), because the browser downscales the device-width to the relevant old-fashioned width to suite the actual needs. It is not a trick, it's a proper documented css3 feature. If you want a live example, pick up a phone and go to http://getbootstrap.com.
But if you're on a phone with HD res., you will not benefit from that.
AFAICS the resollution is still there, 1080p if you ahve that, but the CSS media query can trigger on the device-width - meaning you can combinate width and device-width to target both low-res and high-res and they both both hit only mobiles.

Found a page with numbers that (for me) made it more clear:
http://screensiz.es/phone

Notice how device-width on phones go up to only 400 even if their resolution is high. THAT is what I was seeking,but stubbornly didn't acknowledge.

Dragooon

Quote from: Colby67 on May 24, 2014, 03:59:26 AM
Quote from: Alex@ on May 24, 2014, 01:45:25 AM
Quote from: Dragooon on May 23, 2014, 05:12:04 PM
QuoteThen please explain. If I use ONLY media queries that search for certain widths..how can it filter out that its still a 5" device even if the width is above 1200px? By using other media query keywords to learn that?  Which ones? And how to combine those? I don't care about auto-zooming or what else mobile browsers do of tricks to make it look better, my simple need is a way to make responsive design look the way I intend to on ALL devices - not what the browser decides is the best. Thats not good design, I  might as well use Tapatalk then.
Use device-width. Seriously. That's it, use device-width.
@media (max-device-width: 320px) {
}


The above will apply even if your device has 1120 x 640 resolution (a la retina iPhone), because the browser downscales the device-width to the relevant old-fashioned width to suite the actual needs. It is not a trick, it's a proper documented css3 feature. If you want a live example, pick up a phone and go to http://getbootstrap.com.
But if you're on a phone with HD res., you will not benefit from that.
AFAICS the resollution is still there, 1080p if you ahve that, but the CSS media query can trigger on the device-width - meaning you can combinate width and device-width to target both low-res and high-res and they both both hit only mobiles.

Found a page with numbers that (for me) made it more clear:
http://screensiz.es/phone

Notice how device-width on phones go up to only 400 even if their resolution is high. THAT is what I was seeking,but stubbornly didn't acknowledge.
Exactly

Advertisement: