How Does Bootstrap Work on Full Hd(1920×1080) Mobiles

How does bootstrap work on full hd(1920×1080) mobiles?

TL;DR

CSS pixels are not equal to physical pixels. Let each device/browser figure out how they should display your content, most likely they'll get it right.

Excursion: Bootstraps media-queries

First, let's take a look at how Bootstrap works. Somewhere in a standard bootstrap.css you'll find this code (slightly modified and shortened for the sake of simplicity):

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Code bluntly borrowed from the official bootstrap docs.

What resolution does your screen have?

So, how does your browser determine, which media-queries are relevant? Let's assume it has a property I'd like to call magicalWidth for now.

Your browser than compares magicalWidth with @media (min-width: @screen-sm-min) and if magicalWidth is greater than or equal to @screen-sm-min it takes all of the definitions inside { ... } into account, otherwise it just ignores them. The same goes for all other media queries.

Now, what is magicalWidth? I can tell you that it is most likely not the width of your screen or browser window in (physical) pixels. CSS uses the concept of logical pixels to compute any measurement and our magicalWidth from above is exactly the width of your device or browser window in logical pixels. You can pretty easily test this yourself, take a look at the following example:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"><div class="container">  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#f00;">Test 1</div>  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#ff0;">Test 2</div>  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#0f0;">Test 3</div>  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#0ff;">Test 4</div></div>

Which Boostrap3 grid mode for mobile/desktop do you use?

I think you misunderstand how the grid can be used and you're way overthinking it. The sizes correspond to the way and at what size the columns stack. You can pick and choose and mix it up.

Sometimes it looks better on small devices to stack two images, one after the other. Sometimes leaving them side by side looks better. Just depends on the circumstance and content.

You can choose responsive or non responsive grids if you would like. You can choose to use the img-responsive class on images.

I lifted this little bit from their documentation:

Stacked-to-horizontal

http://getbootstrap.com/css/#grid

"Using a single set of .col-md- grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row."

And of course you can just use media queries to change whatever you want.

Change @media screen sizes in mobileangularui

Open the variables.less in <project-directory>\bower_components\bootstrap\less.

Edit the following variable values:

@screen-xs:                  480px;
@screen-sm:                  768px;
@screen-md:                  992px;
@screen-lg:                  1200px;

@container-tablet:             (720px + @grid-gutter-width);
@container-desktop:            (940px + @grid-gutter-width);
@container-large-desktop:      (1140px + @grid-gutter-width);

Run gulp build again.

This will overwrite the app.min.css, responsive.min.css in your project with new screen size values.

Responsive website on nokia lumia 920

I thought I would get help from here but then I should have researched a bit. Anyways I have found a fix for this. There is an article written on http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html and it does fix the issue for me. There are still a few issues that can get sorted with media query. I will solve those and get back.

Render large screen version on phone

I think removing this line would accomplish that:

<meta name="viewport" content="width=device-width, initial-scale=1">

Bootstrap 4: between col-lg and col-md sizes

Instead of

<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">

could you use?

<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12">

what exactly is device pixel ratio?

Short answer

The device pixel ratio is the ratio between physical pixels and logical pixels. For instance, the iPhone 4 and iPhone 4S report a device pixel ratio of 2, because the physical linear resolution is double the logical linear resolution.

Physical resolution: 960 x 640
Logical resolution: 480 x 320

The formula is:

$linres_p/linres_l$

Where:

$linres_p$ is the physical linear resolution

and:

$linres_l$ is the logical linear resolution

Other devices report different device pixel ratios, including non-integer ones. For example, the Nokia Lumia 1020 reports 1.6667, the Samsumg Galaxy S4 reports 3, and the Apple iPhone 6 Plus reports 2.46 (source: dpilove). But this does not change anything in principle, as you should never design for any one specific device.

Discussion

The CSS "pixel" is not even defined as "one picture element on some screen", but rather as a non-linear angular measurement of $0.0213°$ viewing angle, which is approximately $1/96$ of an inch at arm's length. Source: CSS Absolute Lengths

This has lots of implications when it comes to web design, such as preparing high-definition image resources and carefully applying different images at different device pixel ratios. You wouldn't want to force a low-end device to download a very high resolution image, only to downscale it locally. You also don't want high-end devices to upscale low resolution images for a blurry user experience.

If you are stuck with bitmap images, to accommodate for many different device pixel ratios, you should use CSS Media Queries or the HTML picture Element to provide different sets of resources for different groups of devices. Combine this with nice tricks like background-size: cover or explicitly set the background-size to percentage values.

Example

#element { background-image: url('lores.png'); }

@media only screen and (min-device-pixel-ratio: 2) {
    #element { background-image: url('hires.png'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    #element { background-image: url('superhires.png'); }
}

This way, each device type only loads the correct image resource. Also keep in mind that the px unit in CSS always operates on logical pixels.

A case for vector graphics

As more and more device types appear, it gets trickier to provide all of them with adequate bitmap resources. In CSS, media queries is currently the only way, and in HTML5, the picture element lets you use different sources for different media queries, but the support is still not 100 % since most web developers still have to support IE11 for a while more (source: caniuse).

If you need crisp images for icons, line-art, design elements that are not photos, you need to start thinking about SVG, which scales beautifully to all resolutions.

How Does Bootstrap Work on Full Hd(1920×1080) Mobiles