CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapresponsive-designviewport
Sahan Weerakkody
Sahan Weerakkody

Reputation: 31

How to switch in between Mobile view and Desktop view using view port in Bootstrap?

I have an HTML page designed with Bootstrap and I want to render it as desktop view and mobile view in a desktop browser. For example there are two buttons in page named DESKTOP and MOBILE, when user clicks on DESKTOP button, page should reload as DESKTOP VIEW and when user clicks on MOBILE button, page should reload as MOBILE VIEW. I tried this implementing using viewport and also using ResponsiveViewPort. but didn't get any good result. It will be very useful if anyone can direct me to a correct path.

Upvotes: 0

Views: 2994

Answers (2)

GalacticCowboy
GalacticCowboy

Reputation: 11759

One alternative that wouldn't require any special coding from you would be the Device Toolbar in Chrome. Hit F12 and then click the icon in the upper left that looks like a tablet and phone.

enter image description here

This will open a bar across the top and adjust the viewport accordingly.

Chrome device toolbar

You can pick from one of the default devices or use Edit... to create your own. (There's also a much larger list of default ones that aren't selected to appear in the menu.) There are a bunch of other preferences in there too.

Although there's no good alternative for testing on actual devices, this will give you a pretty good idea of how the site will look on different device sizes.

Note too that every device varies slightly in screen size and resolution, which is a detail that just creating a special viewport wouldn't show for you. You could certainly create a viewport that has the characteristics of a common device, but you wouldn't see exactly the same layout on a different device.

Other browsers have similar capabilities:

  • Firefox has "Responsive Design Mode". To toggle, click the hamburger menu, Developer, Responsive Design Mode, or use the shortcut Ctrl + Shift + M.
  • Edge has modes for some Windows devices (Surface tablets, Nokia Windows phone, etc.)
  • IE 11 has some basic settings on the Emulation tab for display orientation and resolution.

Upvotes: 1

Anuruddha
Anuruddha

Reputation: 3245

This Previewer jquery plugin covers almost all your requirements.

Here is a demo of that library

Upvotes: 1

Related Questions