Multiple Screen Resolution

css for different screen resolutions?

Media queries is a good choice for your problem.

You don't have to use different classes for these, just you have to define different behaviour based on resolution.

You can know the screen height and width by Javascript, but with CSS, I dont think that is possible. The best you can do with css is to define range of devices as in Mobiles, Tablets, Laptops, Really Large screen Devices and based on media queries you can define what a class do on certain type of device.

Have a look a below example:

/* For Mobile */
@media screen and (max-width: 540px) {
    .view {
        width: 400px;
    }
}

/* For Tablets */
@media screen and (min-width: 540px) and (max-width: 780px) {
    .view {
        width: 600px;
    }
}

Actual dimensions can vary as per your case.

This is the same method many framework uses to implement responsiveness.

Strategies for Handling Multiple Screen Resolutions and Aspect Ratios in Web Development

I know this would be a somewhat controversial opinion, but I'd say it anyway: Don't

Don't design for multiple screen sizes or aspect ratios. There are of course a few exceptions: Heavy web applications like webmail clients can definitely do with more screen real estate, and are probably flexible enough to accommodate a large range of screen sizes anyway. Mobile versions of said website, with a more flexible design to accommodate the incredible spectrum of mobile screen sizes can help too for sites with high mobile volumes. However, if you stick to the so called 'desktop web', then I think we can say that 95% of the time there are more important things to care about than screen sizes, resolution and aspect ratio.

First off, lets tackle the easy one. I don't really understand why you would care so much for aspect ratio - it isn't like we care that much for the 'below the fold' nonsense anymore, do we? The web is a vertical medium - scrolling will always have a place in websites. Having everything above the magical 600px line is just stupid.

Next, screen resolution/size: Again, I find it difficult to defend.

Users with large screens do not usually maximize their browser windows, because they find that most website do not take advantage of them. While the web adjust to the user, the user also adjust to the web. Although you could argue that this is a chicken and egg problem, the fact remains that website are usually designed for the lowest common denominator. I'm not defending this position, but rather, pointing it out as the current prevailing trend in the industry.

There are certain things that simply won't work with resolution that are too high or too low. There is, for example, a small range of widths that allow people to read comfortably on screen. Any longer and the amount of movement for the eye to the next line would be annoying. Too low and the text would appear cramped. The fact that the web was designed to be resolution neutral means that paradoxically not many provisions has been made for those who wish to build fluid layouts. min-height and max-height would help, of course, but the wider the range, the more difficulties you will face. Things like orphaned elements, displaced images, backgrounds that run out, etc. are unavoidable for truly flexible sites built with today's technology.

So my opinion is that the simplest method for dealing with multiple resolutions is to ignore it altogether - with today's technology there are not many options anyway - and design for the lowest common denominator.

Nativescrip multiple screen resolutions

The default measurement is DIP (Density Independent Pixels) that makes your app mostly look good on different resolution.

But if you still prefer to write CSS specific to a platform / device / screen resolution / orientation, try nativescript-platform-css.

If you want to completely change the layout of your page then you might have to write different components and load them based on your screen resolution.

How do I get the dimensions (resolution) of each display?

#include <Windows.h>

BOOL CALLBACK MonitorEnumProc(HMONITOR hMonitor,
                              HDC      hdcMonitor,
                              LPRECT   lprcMonitor,
                              LPARAM   dwData)
{
    MONITORINFO info;
    info.cbSize = sizeof(info);
    if (GetMonitorInfo(hMonitor, &info))
    {
        std::cout << "Monitor x: "<< std::abs(info.rcMonitor.left - info.rcMonitor.right)
                  <<" y: "        << std::abs(info.rcMonitor.top  - info.rcMonitor.bottom)
                  << std::endl;
    }
    return TRUE;  // continue enumerating
}

int main()
{
    EnumDisplayMonitors(NULL, NULL, MonitorEnumProc, 0);

    return 0;
}

---

Related Topics