#javascript #jquery
#javascript #jquery
Вопрос:
На моем веб-сайте у меня есть мобильная версия для устройств размером менее 980 пикселей, однако я бы хотел, чтобы устройства увеличивали 570 пикселей только для того, чтобы увидеть это, и если они поворачивают свое мобильное устройство, чтобы они могли видеть весь сайт с масштабированием своего устройства, если это необходимо.
Измените ширину моих страниц, чтобы увидеть мобильную версию. Это то, что я хочу, чтобы устройства видели в портретном режиме, но в альбомной ориентации я бы хотел, чтобы они видели полную версию. Я думал о реализации обнаружения наклона, однако в настоящее время вы можете получить 27 «универсальные сенсорные компьютеры, которые могут наклоняться!
Комментарии:
1. $(‘meta [name=»viewport»]’).remove();
2. Пожалуйста, посмотрите мой измененный вопрос @jme11
3. Действительно неясно, что вы хотите здесь сделать. Вы удаляете тег viewport с разрешением 250 пикселей. Это означает, что практически на каждом устройстве не будет установлен видовой экран (за исключением, может быть, бабушкиного Motorola Razr 2001 года выпуска ;-). Не могли бы вы объяснить, каков ваш предполагаемый результат? Извините, если я сегодня тупой, но я вас не понимаю.
4. Я хочу, чтобы любое устройство шириной менее 250 пикселей видело мою мобильную версию, в противном случае полную версию. Я только что отредактировал свой вопрос
5. Хорошо, но, как я уже сказал, люди, использующие устройства с собственным дисплеем 250 пикселей, вряд ли будут просматривать ваш сайт. Кроме того, я не знаю, что подразумевается под «моей мобильной версией». Означает ли это, что вы не хотите, чтобы меню сворачивалось до переключателя? Потому что это не имело бы никакого отношения к мета-тегу.
Ответ №1:
Если у вас нет включенного тега viewport, страница будет отображаться с использованием разрешения устройства. Это означает, что он, скорее всего, вернет 980 пикселей, а не пиксели css, которые вы ожидаете. Это значение по умолчанию для большинства мобильных браузеров (по крайней мере, на устройствах Android и iOS). Таким образом, попытка добавить тег viewport, проверив, является ли ширина окна меньше 570 пикселей, без того, чтобы для тега содержимого viewport было установлено значение «width = device-width», была бы бесплодной. Вот почему ваша первая попытка не сработала.
Кроме того, если вы попытаетесь удалить тег viewport ПОСЛЕ того, как страница уже отрисована (например, внутри $(document) .готово (функция () {}); это удалит тег, но страница не будет затронута.
Однако вы можете установить для тега viewport другое значение содержимого. Итак, в этом случае вы должны включить <meta name="viewport" content="width=device-width, initial-scale=1.0"> на странице, а затем в готовом документе использовать jQuery, чтобы установить для атрибута content значение ширины по умолчанию 980 пикселей. Поскольку DOM готов, когда вы проверяете ширину окна, изменение значения атрибута content приведет к тому, что устройства, использующие это свойство, будут отображать страницу с разрешением по умолчанию 980 пикселей. (Это ужасно мало на моем iPhone5 и невозможно использовать, но вы заявили, что считаете это приемлемым.)
//add this to your document ready function and make sure
//that the viewport is initially set to content="width=device-width"
var pageWidth = $(window).width();
if (pageWidth < 570) {
$('meta[name="viewport"]').prop('content', 'width=980px');
}
Почему вам не нужно беспокоиться о событиях изменения размера:
Для большинства текущих устройств, на которые вы ориентируетесь, ширина окна не изменяется, и событие изменения размера не будет запускаться при изменении ориентации, потому что это не изменение ширины браузера, а изменение уровня масштабирования. Однако на вашем рабочем столе браузер вообще не будет заботиться о метатеге viewport, поэтому, независимо от того, какое значение у вас там есть, это не влияет на поведение.