How to force xs layout in Bootstrap 3

Question

I'm making a small web project with Bootstrap 3. At the top I've put this as it was suggested in most documents:

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

It works fine on desktop but layout seems to be small on my smartphone (Galaxy Note). Because this web app will mostly be used on a smartphone I wanted to force small screen by adding this to head section of html:

<meta name="viewport" content="width=320">

It didn't work, I've got same layout as of screen resolution greater than 768px.

What I want to achieve is Bootstrap to act in xs layout in small-factor screen size, independent of screen resolution.

Thanks

UPDATE: Here is the fiddle: Fiddle Link

Display Metrics of my phone are: density=2.0 Dpi=320 heightPixels=800 scaledDensity=2.0 widthPixels=1280

EDIT: Here are two screenshots. (I'll do a fiddle later) First is from phone, second from desktop. Desktop screenshot is what I want to get on a smartphone even if its resolution is on par with desktop.

Desktop:

UPDATE 2: I've added this meta tag, but it didn't change anything on Android default browser or Chrome mobile:

<meta name="MobileOptimized" content="320">

Answer 1

What you are trying to achieve is overriding the basic premise of Bootstrap. Bootstrap uses the following scaling classes...

lg - For extra large displays md - For standard sized displays such as desktops and laptops sm - For tablet devices and devices with screens around the 7-11 inch range xs - For mobile phones and devices with such small screens

The point of Bootstrap is to create a website style which will adjust itself based on the screen size automatically. You can use the md scaling class and if a smaller device is used then the elements will be collapsed and stacked on top of one another.