如何在 Bootstrap 3 中在移动屏幕上显示桌面版本? [英] How to show desktop version on mobile screens, in Bootstrap 3?

问题描述

如何在 Bootstrap 3 的移动屏幕上显示桌面版本?我不想要链接来切换桌面/移动版本.我只想在移动屏幕上显示桌面版本.

明确地说，我希望网站在平板电脑上具有响应性，但在 @media screen max-width: 360px 上显示桌面版本.我知道这很奇怪，但我的客户想要那个，我不知道为什么！

谢谢！

解决方案

如果你想这样做，你将不得不根据屏幕的宽度动态地改变你的视口标签.

viewport 元标记强制浏览器使用 device-width 作为视口的宽度，从而使响应式设计在移动设备上成为可能.通过取消此限制，大多数移动设备将在其宽度上撒谎以获取完整站点.使用javascript，您可以根据页面宽度动态更改它

首先在 HTML head 元素中包含标记:

然后我们将监听 resize 事件并根据您的业务规则更改视口:

$(window).resize(function() {var mobileWidth = (window.innerWidth > 0) ?window.innerWidth :屏幕宽度；var viewport = (mobileWidth > 360) ?'宽度=设备宽度，初始比例=1.0':'宽度=1200';$("meta[name=viewport]").attr('content', viewport);}).resize();

<小时>

话虽如此，我会与您的用户一起建议不要这样做.
这是我刚刚吐出的一篇关于添加桌面移动切换按钮 的快速文章>

阻止最终用户做他们想做的事情通常不是一个好主意.您的首要目标应该是开发一个在小型设备上运行良好的网站.如果用户真的想看到缩小的视图，那么您可以在页面底部为他们提供一个切换开关.

How to show desktop version on mobile screens on Bootstrap 3? I don't want a link to toggle desktop/mobile version. I just want to show desktop version on mobile screens.

To be clear, I want the website to be responsive on tablets, but on @media screen max-width: 360px to show desktop version. I know this is weird, but my client want that, and I have no idea why!

Thanks!

解决方案

If you want to do this, you're going to have to dynamically change your viewport tag based on the width of the screen.

The viewport meta tag is what makes responsive design possible on mobile devices by forcing the browser to use the device-width as the width for the viewport. By removing this restriction, most mobile devices will lie about their width in order to get the full site. With javascript you can dynamically change it based on the page width

Start by including the tag in your HTML head element:

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

Then we'll listen to the resize event and change the viewport according to your business rules:

$(window).resize(function() {
    var mobileWidth =  (window.innerWidth > 0) ? 
                        window.innerWidth : 
                        screen.width;
    var viewport = (mobileWidth > 360) ?
                    'width=device-width, initial-scale=1.0' :
                    'width=1200';
    $("meta[name=viewport]").attr('content', viewport);
}).resize();      

Here's a working Demo in Fiddle

Note: Desktop browsers ignore the viewport tag so this will not have any affect on your development machine. In order to test these changes, you can open up the chrome debugger tools and emulate a mobile device.

Here's a screenshot:

---

That all being said, I would work with your user to advise against this.
Here's a quick article I just threw up on Adding a Desktop Mobile Toggle Button

It's generally not a good idea to prevent the end user from doing something that they want to do. Your first goal should be to develop a site that works well on small devices. If a user really wants to see a zoomed out view, then you can provide a toggle switch for them at the bottom of the page.

这篇关于如何在 Bootstrap 3 中在移动屏幕上显示桌面版本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！