Home Forums Archived Forums Mobile View How to differentiate desktop from tablets

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #17655
    Remus
    Participant

    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 !

    #21492
    scrambler
    Moderator

    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

    #21493
    Remus
    Participant

    @scrambler

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

    #21494
    Weaver
    Keymaster

    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.

    #21495
    scrambler
    Moderator

    “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)

    #21496
    Remus
    Participant

    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.

    #21497
    Weaver
    Keymaster

    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%;}
    }

    #21498
    Remus
    Participant

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘ Mobile View’ is closed to new topics and replies.