Я пытаюсь использовать jQuery для динамической загрузки уникальной страницы, зависящей от ширины области просмотра, когда пользователь изменяет размер окна (например, от портрета к ландшафту).
Поэтому я хочу, чтобы моя веб-страница создавалась на маленьком экране. чтобы показать, является ли ширина области просмотра маленькой, и моя обычная веб-страница предназначена для отображения на больших экранах.
jQuery:
$(document).ready(function viewportwidth(){
var viewportWidth = $(window).width();
if (viewportWidth<576) {
$("#page-container").load("../pages/index-small.php");
} else {
$("#page-container").load("../pages/index-regular.php");
}
})
HTML:
<body>
<div id="page-container"></div>
</body>
но он не работает, он загружается и при загрузке страницы.
edit:
(в ответ на комментарий ниже)
Сначала я попробовал гораздо более простое решение, просто используя Медиа-запросы на странице.
<style>@media only screen and (max-width: 575.98px) {</style>
// small page html
<style>}</style>
<style>@media only screen and (min-width: 576px) {</style>
// regular page html
<style></style>
, но это просто показывало небольшую И обычную страницу html друг над другом, независимо от размера экрана.