Advertisement:

Author Topic: Maybe in our world there lives a happy little responsive Curve2 over there  (Read 74977 times)

Offline Bloc

  • Full Member
  • ***
  • Posts: 415
  • Gender: Male
Quote
Then 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.
Code: [Select]
@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.

Offline Akyhne

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 7,331
Quote
Then 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.
Code: [Select]
@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.

Offline Tekkla

  • Jr. Member
  • **
  • Posts: 228
  • Gender: Male
  • Jupp!
    • Tekkla.de on Facebook
    • Tekkla on GitHub
    • @TheTekkster on Twitter
Have you ever tried to include Bootstrap after index.responsive.css?
Nope

Have you ever tried to include Bootstrap after index.responsive.css?
What purpose would that serve?
Nothing :D

Mass style breakage and no responsive benefits whatsoever?
lol :P

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.

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,646
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @antesistan on Twitter
    • Lunarfall
@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.
Active Project(s): [ SimpleDesk ] # [ Lunarfall ] # [ CoreStore ]

Past Project(s): [ ezPortal ]

Offline Bloc

  • Full Member
  • ***
  • Posts: 415
  • Gender: Male
Quote
Then 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.
Code: [Select]
@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.

Offline Dragooon

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 6,738
  • Gender: Male
  • I'm bIn
    • ShitizGarg on Facebook
    • Dragooon on GitHub
    • dragooon on LinkedIn
    • SMF-Media
Quote
Then 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.
Code: [Select]
@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