当前位置: 首页 > 面试题库 >

Bootstrap 3-移动设备上的桌面视图

田修为
2023-03-14
问题内容

在移动设备上时,是否可以将引导网站显示为桌面版本?

基本上,页面将显示992px或1200px视口,而不是小型设备。

例如,BBC允许您使用页面底部的链接在移动网站和桌面网站之间进行切换,这就是我想做的。

谢谢


问题答案:

您只需要设置视口

像您说的那样建立一个链接,该链接是页面的重新加载,但带有?desktop_viewport=true,则可以设置会话,只要设置了该会话,就可以编写

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

代替此(响应版本)

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

在你的 <head>

将此用作按钮

<a href="mywebsite.php?show_desktop_mode=true">I want desktop mode!</a>

并将其插入您的php文件的顶部(必须在每个页面上加载女巫)

<?php
session_start();
if($_GET['show_desktop_mode'] == 'true') {
    $_SESSION['desktopmode'] = 'true';
}
?>

之后,您必须根据以下步骤根据Sessionvalue更改视口<head>

<?php
if($_SESSION['desktopmode'] == 'true') {
    /* DESKTOP MODE */
    ?>
    <meta name="viewport" content="width=1024">
    <?php
} else {
    // DEFAULT
    ?>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php
}
?>


 类似资料:
  • 我有一个在桌面上运行得非常好的piechart。它从AJAX请求中检索数据,并存储它获得的数据/json。然后将选定的数据推送到图表中。我用的是百里香 当我在手机上通过Safari或chrome访问我的页面时,页面上的所有内容都显示得很好,但是图形不存在。 我尝试过改变响应true/false,维护A265 Ratio false/true,玩chart.js留档中提供的其他选项。改变了视口,在画

  • 我有一个网站,必须响应移动电话。我用我的桌面创建了它。当我调整浏览器窗口时,它在手机上工作得很好,但当我在我真正的手机上检查它:三星Galaxy S2时,它对手机视图没有反应。 会有什么问题吗?

  • 问题内容: 我想用于单个页面的webapp。我担心是否有一种优雅的方法可以根据客户端是移动设备还是台式机来“发送”不同的模板。有什么办法吗?是否建议Web服务器“了解”浏览器是什么并相应地发送视图,以便浏览器始终要求输入template.html或编写JavaScript,以便浏览器告诉Web服务器获取mobile / template.html? 问题答案: 我将如何向用户显示一个模板并使该模板

  • 我在桌面视图中有左div和右div。左div有聊天列表。右div有一个选定的聊天详细信息。(从左侧聊天列表div中选择的聊天)在移动视图中,它应该显示左侧聊天列表div。从聊天列表div(左div)中选择特定的聊天后,它应该在单独的移动UI中显示所选的聊天细节。请帮我用简单的代码解释一下。

  • 我在网站的首页上有一张封面照片,它在桌面上看起来很好,随着浏览器大小的变化,它的尺寸也在变化,但在移动设备上打开时看起来绝对可怕。

  • 问题内容: 我的html主体中有一个巨大的块,其中占80%,并且我的下部还有一个页脚。 页脚中的文本也有80%,如果我在PC上测试它是相等的,但是如果我在移动设备上对其进行测试,则页脚中的文本非常小,无法读取。 这怎么可能?解释是什么,如何避免? 我的主要文字: 我的页脚: 我的CSS: 问题答案: 您是否已将 视口元标记添加 到文档中? 如果没有,请将其添加到您的头部: 移动浏览器自然会尝试缩小