Можно ли показать загрузочный сайт в качестве настольной версии, когда на мобильном устройстве?
В основном на странице будут отображаться видовые экраны 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';
}
?>
После этого вы должны изменить область просмотра в соответствии со значением Session, выполнив это в <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
}
?>
Вы можете переключать классы, отвечающие за Bootstrap, используя jQuery. Например,
/* toggle layout */
$('#btnToggle').click(function(){
if ($(this).hasClass('on')) {
$('#main .col-md-4').addClass('col-xs-4').removeClass('col-md-4');
$(this).removeClass('on');
} else {
$('#main .col-xs-4').removeClass('col-xs-4').addClass('col-md-4');
$(this).addClass('on');
}
});
Я использую адаптивные селектор сетки и создал рабочий стол на моей странице. Во-первых, видовое окно должно быть изменено, как указано ранее, на
<meta name="viewport" content="width=1024">
но это само по себе не изменяет поведение селекторов сетки. Страница более широка в мобильном режиме, но у нее все еще есть мобильная компоновка. Чтобы изменить это, я взял копию из bootstrap.css и назвал ее bootstrap-non-responsive.css. В этом файле я изменил все точки торможения разных видов на ширину 1 px.
Это можно сделать, изменив все строки с помощью ключевого слова @Media. Например.
@media (min-width: 768px) {
необходимо изменить на
@media (min-width: 1px) {
Можно воспользоваться несколькими заменами одних и тех же текстов, и легко и быстро изменить файл css, если вы понимаете, как работает функция загрузки Bootstrap. Возможно также удалить некоторый код из css файла, но это не нужно, просто оптимизация.
В последнее время я создал ссылку для переключения вида рабочего стола (используемый класс "hidden-lg" ), который создал файл cookie для сохранения выбора вида. Если был выбран вид рабочего стола. Я изменил обычный код:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.2.0/css/bootstrap.min.css">
к
<meta name="viewport" content="width=1024">
<link rel="stylesheet" href="bootstrap-3.2.0/css/bootstrap-non-responsive.css" />
Если был выбран вид рабочего стола, я показал ссылку на мобильное представление, которое удалит куки файл и переключится на отзывчивый вид.
Да, просто не используйте селектор селекторных наборов Bootstrap.
"Поверните любую схему сетки фиксированной ширины в макет полной ширины, изменив внешний край .container на .container-fluid."
Документы говорят добавить класс .container-fluid., чтобы сделать его текучим, поэтому, удалив его, вы можете остановить его.
вы можете использовать jQuery для изменения классов.
<a id="js-switch">switch to desktop</a>
<script>
$("#js-switch").on('click', function(event) {
event.preventDefault();
/* Act on the event */
$("#container-id").removeClass('container-fluid');
$("#container-id").addClass('container');
});
</script>
У меня есть сайт WordPress с темой, основанной на начальной загрузке, и я хочу иметь полную панель навигации вместо значка гамбургера при включении режима рабочего стола в Android.
Как это возможно и какие файлы я должен загрузить здесь?