iPad Pro 12" recognized as Laptop, not tablet


#1

Hi everyone, especially to all the developers at blocs!

I noticed a strange behaviour on my iPad 12" today:
When rescaling my website, the iPad is (probably because of its “bigger-than-usual” screen size) recognized by my responsive website as a desktop / laptop.

I can see that, because I made a special bloc which is only visible for tablets / mobile, not for Laptops or Desktops. (the first picture of my band with no parallax-effect --> because its not supported on mobile devices).

Is there any possibility, to tell my website, that this iPad is no Laptop / Desktop-Device or do I have to think outside the box?

You can test it here: https://www.supernova-live.de (still in development).

Thanks in advance for helping me!
All the best
Beni


#2

The notion of device specific breakpoints is something to try and move away from. In Blocs we now refer to these as sizes (XL | MD | SM | XS) not devices. The break points kick in based on screen width. You can find the screen width that is target in the lower left corner of the design canvas.


#3

Hey Norm, thank you for your quick reply!
Alright, I understand the concept of breakpoints.

Is there a possibility to manually adjust these sizes or are they fixed? (i haven’t found any way to change them)
If they are adjustable, I would just make the MD size a little bigger, so an iPad Pro with 12" will still be in the MD-Breakpoint size.


#4

Not from within Blocs. I think you would have to edit the core of Bootstrap to do that, others may know of a better.


#5

Hi @Beni

This may head you to the right direction, see section on Grid Breakpoints. However, it makes more sense to read all from the beginning.

https://uxplanet.org/how-to-customize-bootstrap-b8078a011203

MDS


#6

Hey @Norm and @MDS: Thank you very much for your answer and the link. This helps me to dive further into this topic. Wonderful!
All the best
Beni