Недавно я думал о методах создания веб-сайтов для нескольких размеров экрана. Кажется, что общий подход заключается в использовании адаптивного дизайна сайта или адаптивного дизайна сайта (хотя есть некоторые споры о том, что означает адаптивный веб- дизайн!) Подход адаптивного дизайна сайта (и одно определение адаптивного дизайна сайта) основан на Идея «переформатировать» содержимое страницы отлично подходит для того, чтобы простые веб-сайты соответствовали разным размерам экрана — просто посмотрите, насколько популярен загрузчик Twitter !
Проблема, которую я обнаружил, заключается в том, что вы можете захотеть, чтобы разные элементы отображались на разных устройствах или даже на тех же элементах, но в другом порядке. Вы можете сделать это, имея дублированный контент, а затем скрывая его или показывая его с помощью медиа-запросов, но мне это кажется взломом. Существует также проблема, заключающаяся в том, что если у вас есть устройство с небольшим экраном, вам не нужны большие изображения, в то время как на большом экране. Однако, если вы добавите это в свой HTML <img src = «http://placekitten.com/1024/400» style = «display: none»>, есть большая вероятность, что браузер все равно загрузит это изображение, даже если оно не отображается — это означает, что вы на самом деле не создаете веб-сайт, оптимизированный для размера экрана.
Это привело меня к попытке придумать другой подход к проблеме — начать с мобильного подхода первым.
Теперь, прежде чем я продолжу, я не являюсь экспертом внешнего интерфейса, особенно в медиа-запросах (и определенно не в дизайне!), Поэтому, пожалуйста, рассмотрите это как подтверждение концепции. Хорошо, учитывая это — это то, что я придумал …
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
color: black;
}
article, div, nav, footer {
border:1px dotted grey;
background-color:yellow;
}
#bigisbest {
background-color:lightblue;
}
#adverts {
background-color:black;
color:white;
}
@media screen and (max-width: 479px) {
/* CSS for small screen */
body {
background-color: red;
}
#small {
background-color: orange;
}
}
@media screen and (min-width: 480px) and (max-width: 1023px) {
/* CSS for medium screen */
body {
background-color: green;
}
#medium {
background-color: hotpink;
}
}
@media screen and (min-width: 1024px) {
/* CSS for large screen */
body {
background-color: blue;
}
#large {
background-color: purple;
color:white;
}
}
</style>
</head>
<body>
<!-- this is the 'mobile first' content -->
<article id="small">#small: <em>small screen</em></article>
<div id="adverts">#adverts: <em>The adverts go here</em></div>
<nav id="navigation">#navigation: <em>The navigation bar</em></nav>
<article id="content">#content: <em>The page content goes here</em></article>
<footer id="footer">#footer: <em>The page footer goes here</em></footer>
<div id="bigisbest">#bigisbest: <em>best viewed on large screen</em></article>
<!-- end of the 'mobile first' content -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
// define the elements and order of the content of the page for each screen size
var layouts = {
medium: {
elements: ['medium','bigisbest','navigation','content','adverts','footer'],
remove: ['small']
},
large: {
elements: ['large','navigation','content','adverts','footer'],
remove: ['small','bigisbest']
}
};
jQuery(function ($){
var device = getDevice(),
$body = $('body'),
i,
id,
el,
append;
// see if there is a layout for this screen size
if (layouts[device]){
// loop backwards to build DOM for this screen size
for (i=layouts[device].elements.length; i>0; i--){
id = layouts[device].elements[i-1];
el = document.getElementById(id);
if (!el){
console.warn(id + ' not found');
break;
}
if (el.tagName==='SCRIPT'){
// it's a template so append to DOM
$body.prepend(el.innerHTML);
console.info(id + ' template inserted');
}else{
// already on page so just move it
$body.prepend(el);
console.info(id + ' moved');
}
}
// remove unwanted elements
if (layouts[device].remove){
for (i=0; i<layouts[device].remove.length; i++){
// on page but we don't want it
id = layouts[device].remove[i];
$('#'+id).remove();
console.log(id + ' removed');
};
}
}
// simple function to detect screen size and give it a name
function getDevice(){
var viewportWidth = $(window).width();
if(viewportWidth>=1024){
return 'large';
}else if(viewportWidth>=480){
return 'medium';
}else{
return 'small';
}
}
});
// this is just here for IE...
if(!console) {console={}; console.log = function(){};}
</script>
<!--
HTML templates
This is how the extra page 'elements' are defined ready to be applied to the simple layout above
Note that the script tag has a type of text/html
-->
<script type="text/html" id="large">
<article id="large">
#large <em>This is a large screen so huge image in here.</em><br>
<img src="http://placekitten.com/1024/400">
</article>
</script>
<script type="text/html" id="medium">
<article id="medium">
#medium: <em>This is a medium screen so show an image in here</em><br>
<img src="http://placekitten.com/480/200">
</article>
</script>
</body>
</html>
Здесь у меня есть HTML-документ, в котором просто есть элементы, которые я хочу видеть на своем маленьком экране (сначала мобильный) в теле, как обычный HTML. У меня также есть немного CSS, который содержит несколько простых медиа-запросов. JavaScript начинается с определения других макетов и того, какие элементы я хочу и не хочу видеть на странице, он также определяет порядок элементов, поэтому я могу использовать один элемент в моей разметке HTML, но он должен появляться в разных местах в зависимости от размер экрана (вместо дублирования и использования CSS, чтобы скрыть и показать их). Далее следует код для добавления / удаления / вставки элементов (у меня также есть несколько вызовов console.log, чтобы продемонстрировать, что происходит при его запуске), и последний бит JavaScript — это функция для определения ширины экрана. и дать ему имя — которое соответствует макетам, определенным в верхней части JavaScript.
После JavaScript я определил некоторые шаблоны, используя трюк, который я украл у Джона Резига . Процитирую то, что он говорит:
Встраивание в вашу страницу скриптов с неизвестным типом контента (как в данном случае — браузер не знает, как выполнить скрипт text / html) просто игнорируется браузером — и поисковыми системами и программами чтения с экрана. Это идеальное устройство для маскировки шаблонов на вашей странице. Мне нравится использовать эту технику для быстрых и грязных случаев, когда мне просто нужен маленький шаблон или два на странице и я хочу что-то легкое и быстрое.
Поскольку код игнорируется браузером, у меня может быть HTML, который я не хочу отображать, а также изображения, такие как <img src = «http://placekitten.com/1024/400»> не загружается, пока этот шаблон не будет добавлен в DOM.
Итак, поехали, скопируйте приведенный выше скрипт, попробуйте изменить размер своего браузера и обновить его (я не удосужился добавить JavaScript, чтобы обнаружить изменение размера экрана, чтобы он запускался только при загрузке страницы), и посмотреть, что вы думаете. Было интересно строить, даже если к нему никогда не привыкнуть!