|
Сообщение от Vikal
|
|
С телефона пробую - почему-то бесится размер шрифта
|
Мобильные браузеры отображают страницы в виртуальном «окне» (
viewport), которое обычно шире экрана устройства. Поэтому им не нужно сжимать макет каждой страницы в крошечное окно (что может сломать некоторые сайты, не предназначенные для мобильных устройств). Пользователи могут изменять и масштабировать видимую область, чтобы видеть разные части страницы.
В мобильной версии Safari появился "мета тег viewport" (
viewport meta tag), который позволяет веб-разработчикам контролировать размер окна просмотра и масштаб страницы. Многие другие мобильные браузеры также поддерживают этот тег, хотя он не является частью какого-либо веб-стандарта.
Документация от Apple хорошо описывает, как веб-разработчики могут использовать этот тег. Например, вы можете добавить
<meta name="viewport" content="user-scalable=no, width=device-width">
|
Сообщение от Vikal
|
|
Вот таких таблиц, только с разными <div class="con-ХХХ"> 20 штук на 1 странице. Как сделать так, чтобы при обновлении страницы отображалась только 1 случайная из них?
|
Зачем вам 20 таблиц, если вы всё-равно показываете только одну? Храните свои данные в виде объекта (например, в формате JSON), которые вы сможете легко обрабатывать, и отрисовывать, как захотите. При таком подходе вы сможете легко менять шаблон.
|
Сообщение от Vikal
|
|
Пока вижу вариант с твоим кодом (спасибо еще раз), сделать так - 1 страница, на ней 20 таблиц, у каждой таблицы anchor и ссылки ведут к якорям, т.е. при клике на картинку-ссылку перекидывает на страницу со всеми таблицами и просто отматывает на нужный анчер. Но это криво... Остальные таблицы, по идее, должны быть скрыты.
|
Пусть на главной странице находятся картинки-ссылки (для примера, пусть это будут ссылки на случайные песни и рецепты), при переходе по которым открывается страница с вашей таблицей, в которой находится случайная песня или рецепт. (Эти данные, как вы уже знаете, должны находиться в объекте) Кнопка Next как я понимаю, должна показать следующую случайную таблицу.
Для того, чтобы это сделать, вам достаточно описать только одну таблицу, в которую будут вставляться данные. Это может, например, выглядеть так... (часть файла index.html)
<section id="home"></section>
<section id="gallery">
<a class="home" href="#page=home">⌂ Home</a>
<h2 id="title"></h2>
<table>
<tr>
<td colspan="2" id="text"></td>
</tr>
<tr>
<td>
<a id="launchPlayerLink">
<img id="poster">
</a>
</td>
<td>
<a id="next">Next</a>
</td>
</tr>
</table>
<button id="closeButton" hidden>×</button>
<iframe id="videoPlayer" hidden width="560" height="315" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
Данные будут вставляться через скрипт, и чтобы показать, насколько гибким является такой подход, я ещё в шаблон добавил видео и заголовок. (И все сотни представления таблиц теперь такие!)
Теперь нужно написать скрипт, который поместит на главную страницу картинки-ссылки на основе данных. Вот пример того, как могут выглядеть данные в JSON. (файл data.json)
{
"songs": {
"title": "Random Songs",
"background": "https://picsum.photos/id/145/400/200",
"items": [
{
"title": "It’s not safe to turn off your computer",
"videoId": "vCwnsu_tNIs",
"text": "Nothing stays alike from another perspective..."
}, {
"title": "Radioactive",
"videoId": "2r0bx7R8UIg",
"text": "I'm waking up, I feel it in my bones\nEnough to make my systems blow..."
}
]
},
"cooking": {
"title": "Random Cooking",
"background": "https://picsum.photos/id/1060/400/200",
"items": [
{
"title": "Steak",
"videoId": "h5gcJjOSDv4",
"text": "How to cook steak"
},
{
"title": "Fish’n’Chips",
"videoId": "UtiI9Gy-De8",
"text": "How to cook Classic Fish and Chips"
}
]
}
}
Здесь указано две картинки-ссылки (а по сути раздел), указано какой текст выводить на ссылке, какую картинку использовать, указаны данные для таблиц внутри раздела. А вообще эти данные можно отрисовать каким угодно способом, возможности безграничны!
Теперь сам скрипт (недописанный файл tables_app.js)
const pg = {
data: null,
page: null,
category: null,
id: null,
settings: {
updateIdOnPageReload: true
}
};
document.addEventListener("DOMContentLoaded", event => {
fetch("data.json")
.then(response => response.json())
.then(data => {
pg.data = data;
urlHandler({ newURL: location.hash = location.hash || "#page=home" });
if(pg.settings.updateIdOnPageReload) {
var params = new URLSearchParams(location.hash.replace(/^#/g, ""));
params.delete("id");
location.replace(`#${params}`);
}
})
;
});
addEventListener("hashchange", urlHandler);
function urlHandler(event) {
var params = new URLSearchParams(new URL(event.newURL, location).hash.replace(/^#/g, ""));
pg.page = params.get("page") || "home";
pg.category = params.get("category");
pg.id = params.get("id");
pg.isPlayer = params.has("player");
for(const section of $$("body > section[id]"))
section.hidden = true;
$(`body > section#${pg.page}`).hidden = false;
// здесь происходит изменение вида, подстановка данных в зависимости от значении в pg
}
function $(selector, node) {
return (node || document).querySelector(selector);
}
function $$(selector, node) {
return (node || document).querySelectorAll(selector);
}
Сначала в скрипте загружается файл data.json. Каждый раз, когда происходит изменение в хеше URL (например, когда нажимают на ссылку, обновляют страницу), происходит вызов функции urlHandler, в которой происходит изменение страницы, чтобы она соответствовала нужным данным. Также вызов происходит сразу после загрузки данных, чтобы страница соответствовала виду, описываемому в хеше URL.
Вот полный рабочий пример с картинками-ссылками, при нажатии на которые открывается случайная таблица, построенная на основе данных...
https://charm-launch.glitch.me/tables/
Чтобы посмотреть весь код, откройте сайт в инструментах разработчика (например в Chrome DevTools вкладка Sources)
