мета-просмотр, влияющий на jQuery?

поэтому я сейчас пытаюсь оптимизировать свой блог для мобильных устройств. Я выбрал способ добавления дополнительного файла CSS для устройств с шириной окна менее 768 пикселей. Моя страница имеет ширину 1022 пикселя в режиме рабочего стола, мобильная версия имеет плавную ширину.

Итак, мой код в разделе заголовка таков:

var mobileSite = false;
if($(window).width() < 768) {
    mobileSite = true;
    $('head').append('<link rel="stylesheet" href="mysite.com/mobile.css" type="text/css" />');
}

Работает как шарм до сих пор. Следующее, что нужно сделать, это запретить iPad (еще не тестированному на Android) масштабировать раздел контента. В любом режиме iPad должен отображать всю страницу без увеличения. Поэтому я добавил это:

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

безуспешно. Насколько я понимаю, width=device-width должен сообщить браузеру, какой размер имеет страница, поэтому браузер знает, насколько он должен уменьшаться. Я попробовал initial-scale=0.7, что помогло, но я думаю, что это только для конкретного устройства, на котором я пробовал это, которым был iPad 2. Итак, я попробовал width=1022, что помогло - iPad по умолчанию показывает всю страницу без увеличения. Но побочным эффектом было другое. мобильные устройства, такие как iPhone или Lumia 920, больше не загружали мобильный CSS, что для меня очень странно. Но я подумал, что могу использовать определенную мета для мобильной и настольной версии моего сайта:

var mobileSite = false;
if($(window).width() < 768) {
    mobileSite = true;
    $('head').append('<link rel="stylesheet" href="mysite.com/mobile.css" type="text/css" />');
    $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />');
} else {
    $('head').append('<meta name="viewport" content="width=1022, initial-scale=1.0, maximum-scale=1.0" />');
}

Здесь тот же эффект. Мобильная версия больше не загружается. Таким образом, mobile.css не добавляется.

В чем проблема?

Что я хочу: Показывать настольную версию моего сайта на любом устройстве с шириной окна более 768 пикселей, полностью уменьшая масштаб, и загружать mobile.css для каждого устройства с шириной окна ‹768 пикселей.


jquery meta viewport
person ProblemsOfSumit    schedule 26.12.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать свой вьюпорт

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

вместе с медиа-запросами CSS для таргетинга на определенные размеры области просмотра. Прикрепленный JSFiddle делает то, что вы пытаетесь достичь, без необходимости использования Javascript: http://jsfiddle.net/3muzkfdt/

Измените размер панели результатов, чтобы увидеть страницу с использованием другого CSS.

Если вы хотите, чтобы CSS был разбит на модули mobile.css и desktop.css, просто импортируйте CSS следующим образом:

@media (max-width: 768px){
   @import 'mobile.css';
}

@media (min-width: 769px){
   @import 'desktop.css';
}

См. MDN для получения дополнительной информации о медиа-запросах и их использовании: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

person Gareth Talty    schedule 12.09.2014