How to differentiate desktop from tablets

[Remus]

Hello !
I use Weaver Xtreme 1.1.3 – Plus (1.1)
Test site is displayed fine on every mobile, but on desktop I could decrease font size a bit. Is there a way to differentiate tablets from desktop devices concerning base font size?

Other question: .is-ipad includes every tablet with the same size, or just iPads ?

Thanks !

[scrambler]

The selector you can use with custom CSS for devices are

.is-desktop

.is-mobile  (smalltablet and phones)

.is-smalltablet

.is-phone

For the font size I suppose the best way would be to use the rule below (base font size is on the body tag which is at the same level as the device class so must be attached, and the default size is 1em.

body.is-desktop {font-size:0.8em;}

.is-ipad is only for ipad

[Remus]

@scrambler

Thank you, but just later I checked on tablet, and font size is modified for desktop, and also for tablet.

[Weaver]

Weaver Xtreme considers any device with a width of 768px or more to be a desktop.

By default, there is no difference in the base font size for any device – the default is 16px for all devices. Weaver Xtreme Plus allows you to set larger or smaller base font size for tablets and phones. It is up to you to judge if larger or smaller works better for your own site.

Apple devices can be distinguished to iPod, iPad, or iPhone, while this is not possible for Android devices.

[scrambler]

“Weaver Xtreme Plus allows you to set larger or smaller base font size for tablets and phones”

I had missed that…

@remus, you don’t need my rule then, just set the main font size to what you need for desktop, then use the plus option to change it for small tablets and phones (MAin Options > Fonts & Custom)

[Remus]

I checked multiple pages on Android tablet and also desktop, and noticed when it is displayed fine on desktop, I need a little zoom increase on tablet. Conversely, if I increase a bit the font size – body is-desktop 😉 – then the page is perfectly readable on tablet without any adjustment, but is far from perfect on desktop, comparing to previous setting.

Therefore, this is how it arise the need to use an option for different font size on desktop /tablets. Or at least the possibility for a custom rule that would solve this problem.

[Weaver]

The closest thing available for that would be using .is-ipad or .is-android + @media rules.

Something like:

.is-pad {font-size: 120%;}
@media (min-width:640px) {
.is-android {font-size:120%;}
}

[Remus]

Now it fits so fine on every browser and device (using font-size: 105%;), can’t wait rebuilding cache 🙂 Thanks everybody for answers !

[Author]

Posts