Skip to main content
U
Under S.
Inspiring
December 6, 2018
Question

(CSS) Refining the targeting of mobile devices

  • December 6, 2018
  • 2 replies
  • 2723 views

So I've been using this great bit of code you guys passed on to me last week to make my site more responsive to mobile.

@media screen and (max-width: 980px) {

.example { font-size: .8em }

}

Only problem is, 980px happens to be the resolution of both my smart phone AND tablet. So when I target devices via resolution only, I cannot differentiate between the two, despite the fact that one is physically 3 times the size of the other and should not be serving the same layout.

Since I want the tablet to display the exact same thing a desktop monitor would -- and simply want to target whatever is physically smaller than the average tablet (so, phones) -- how would I go about refining the code to target 'just phones'?

I'd like phones to serve a very minimalist layout -- just a single zoomed-in text column -- but that looks awful on a tablet. The tablet can comfortably handle the desktop layout, and is much better off with it (I compared both).

PS: I'm aware that 980px just happens to be my own devices' resolution, and your mileage may vary on that front... but after researching mobile resolution standards, it's still one I'm comfortable using as a cut-off point, if I'm forced to pick one.

    This topic has been closed for replies.

    2 replies

    pziecina
    pziecina
    Legend
    December 7, 2018

    I would strongly advise against using your mobile devices as more than a general idea of how a layout will look. Once you do that you are designing for specific settings. The iPhone X and iPad pro have a pixel density of 4x, double that of the iPhone 5, and many devices are starting to use that type of screen.

    Text on all the devices are upscaled from the users settings to have the size appearance of a standard 1x screen, (but a hi-dpi apearance) providing you use the viewport meta tag set to 'device-scale 1'. The only items you have to worry about when designing are images and videos, as these are displayed at the created pixel density.

    For images use the srcset property in html and image-set in css, for video it is best to offer the user the standard 1x video and an option to view a hi-dpi version if they wish.

    U
    Under S.Author
    Inspiring
    December 6, 2018

    I found this potential solution markup.

    Based on what I'm reading there, I can target an iPhone 5S, or I can target a Google Pixel XL, but I can't target both? How would I even begin to combine them when they all have different min/max resolutions?

    Is resolution really the only way to target mobile devices?

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    December 6, 2018

    Have a look at CSS media queries: width versus device-width and The viewport meta tag- the key to preparing a page for mobile devices optimization

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices