Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to force desktop view on mobile devices - Bootstrap?

How do i force desktop view on mobile devices with Bootstrap?

I have tried fixing the viewport width to 1024, but still it doesn't work me.

Any Advices?

like image 327
Sandeep Avatar asked Jul 10 '15 07:07

Sandeep


People also ask

How do I force my desktop to display on a mobile device?

Search for “desktop”, for “Global setting to request desktop site on Android“, select Enabled and restart the browser. Tap on menu , select Settings > Site Settings > Desktop Site> enable toggle to “Request the desktop view of sites“.

How do I change my desktop view to mobile view in HTML?

Launch the Google Chrome browser and go to the site you want to view. Hit F12 on your keyboard to access DevTools. When the mode is turned on, click the “Toggle Device Emulation” icon. You can choose from a list of iOS and Android devices to emulate them.

How do I force a website to open in desktop mode?

Enabling Desktop BrowsingOpen the Chrome app and tap the three dots in the top-right corner. When you do this, a menu will pop up. Here, you will see the button "Desktop site" — tap on this to turn on desktop browsing.

Does bootstrap work on mobile?

Mobile devices Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported.


2 Answers

You just need to set the Viewport

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

Instead of this (Responsive version)

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

Look at here. Should solve your issue.

SO - bootstrap-3-desktop-view-on-a-mobile-device

SO - how-to-show-desktop-version-on-mobile-screens-in-bootstrap-3

like image 198
Simpal Kumar Avatar answered Oct 05 '22 01:10

Simpal Kumar


Thanks All,

This code works for me:

var viewMode = getCookie("view-mode");
if(viewMode == "desktop"){
    viewport.setAttribute('content', 'width=1024');
}else if (viewMode == "mobile"){
    viewport.setAttribute('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no');
}
like image 42
Sandeep Avatar answered Oct 05 '22 02:10

Sandeep