Jump to content

Question

Прикинул как лучше вопросы задавать... попробую все в одной теме. 
 
Будут рассмотрены следующие темы:
  • meta_name="viewport"  во всей красе
  • media запросы - взгляд изнутри
  • особенности мобильных браузеров - как происходит обработка-подстройка кода странички под реальный экран мобильника
  • шрифт - как подстраиваться под размер экрана мобильных браузеров
  • фотографии - легкие но не мелкие, с видом на будущее, retina-дисплей,
  • IE хаки
  • Иконка сайта

Обо мне
Верстальщик-любитель. Знания - только HTML и  CSS.
о PHP знаю только что собирается из отдельных кусков кода. 
Сервисных технологий и терминов не понимаю.
По теме адаптивной верстки прочитал довольно много. Другими словами базовые знания есть. 
Сейчас изучаю коды реальных сайтов и вижу много непонятного. 
 
 
Прошу помочь мне разобраться. 
 
 
Моя цель 
Сделать адаптивный сайт на чистом HTML и CSS, Яваскрипт собираюсь использовать только в крайнем случае (например для меню).
Сайт будет без движка. 
 
 
Интересуют следующие основные моменты:
  • сайт легко сверстать вручную
  • сайт должен быстро загружаться
  • сайт должен быть хорошим с точки зрения SEO
 
Общий подход
Сайт далать - так делать с видом на будущее!  чтобы не пришлось через пару лет переделывать.
Link to comment
Share on other sites

Recommended Posts

  • 0
Начнем с простого - Иконка сайта 

 

Встречал несколько вариантов комплектов-наборов

Часто бывает вот такое



<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon-precomposed" href="/sites/all/themes/surrey_theme/favicon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/sites/all/themes/surrey_theme/favicon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/sites/all/themes/surrey_theme/favicon-114x114.png" />


 

вот этот наиболее полный вариант



<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="/_uofm_resources/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/_uofm_resources/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/_uofm_resources/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/_uofm_resources/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/_uofm_resources/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/_uofm_resources/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/_uofm_resources/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/_uofm_resources/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/_uofm_resources/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/_uofm_resources/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/_uofm_resources/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="/_uofm_resources/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/_uofm_resources/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/_uofm_resources/favicon-16x16.png" sizes="16x16">


Есть ли смысл заморачиваться, или это просто модный прибабах? 

Скорость загрузки снизится? 
Link to comment
Share on other sites

  • 0

Напишите мне на afdw@yandex.ru

Написал по указанному E-mail
- С какой целью вы предложили мне написать?
 
ответ  afdw
- На форуме лучше задавать вопросы, ответы на которые пригодятся другим. 
Если вам нужна помощь в создании конкретного вашего сайта - то это лучше делать в личке или в почте.
 
Комментарий
- Согласен.
- Мне нужна теория. А сайт я сам сверстаю. 
На форуме мне лучше, если будет неточность/ошибка - модераторы подправят. 
(личка кстати не работает)
 

 

Это влияет не на скорость загрузки, а на иконки для мобильных телефон большего разрешения.

 

 
Я с мобильными устройствами совершенно незнаком. 
Думаю не для всех сайтов "наиболее полный вариант" есть смысл делать.
 
Просьба чуть подробнее.
Первую строку понимают и подгружают все мобильники?
Для каких целей предназначени иконки png, на рабочий стол загрузить?
 
Я думаю 15 строк многовато. 
Как бы вы сверстали упрощенный вариант, чтобы, с горем пополам, все модели поняли? 
 
Где можно найти список, для каких моделей предназначены эти размеры favicon-ХХХХ.png?
Edited by autit
Link to comment
Share on other sites

  • 0

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

Это просто обычная иконка.


<link rel="apple-touch-icon" sizes="57x57" href="/_uofm_resources/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/_uofm_resources/apple-touch-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/_uofm_resources/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/_uofm_resources/apple-touch-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/_uofm_resources/apple-touch-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/_uofm_resources/apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/_uofm_resources/apple-touch-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/_uofm_resources/apple-touch-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/_uofm_resources/apple-touch-icon-180x180.png"> 

Эти иконки нужны для закрепления сайта как приложения на iOS:

7624.newAddTelligentIconToHomeScreen.PNG


<link rel="icon" type="image/png" href="/_uofm_resources/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="/_uofm_resources/favicon-194x194.png" sizes="194x194"><link rel="icon" type="image/png" href="/_uofm_resources/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/png" href="/_uofm_resources/android-chrome-192x192.png" sizes="192x192"><link rel="icon" type="image/png" href="/_uofm_resources/favicon-16x16.png" sizes="16x16">

Это нужно для экранов повышенного разрешения, где всё увеличивается в несколько раз и иконки начинают выглядеть размыто.

Edited by afdw
  • Like 1
Link to comment
Share on other sites

  • 0

Про "размыто"

Нужны все 5 или достаточно одного? , например 

<link rel="icon" type="image/png" href="/_uofm_resources/favicon-32x32.png" sizes="32x32">

Ну размылось немного... может сойдет для не сильно требовательного пользователя? 

Link to comment
Share on other sites

  • 0

Про "размыто"

Нужны все 5 или достаточно одного? , например 

<link rel="icon" type="image/png" href="/_uofm_resources/favicon-32x32.png" sizes="32x32">

Ну размылось немного... может сойдет для не сильно требовательного пользователя? 

Обычного favicon.ico чаще всего хватает. Но в чём проблема нагенерировать иконки всех нужных разрешений?

Link to comment
Share on other sites

  • 0

Спасибо! 

Следующий вопрос media запрос

 

Мне встречались 4 типа media запросов:
 
1 ширина контейнера в пикселях 
@media (min-width:320px) and (max-width:767px){.container{ width:320px;} .col{display:none}}@media (min-width:768px) and (max-width:1023px){.container{ width:768px;} .col{width:230px;}}@media (min-width:1024px) {.container{ width:960px;} .col{width:260px;}}
2 ширина контейнера в процентах
@media (min-width:320px) and (max-width:767px){.container{width:100%;} .col{display:none}}@media (min-width:768px) and (max-width:1280px){.container{width:100%;} .col{width:23.9%;}}@media (min-width:1281px){.container{width:90%;} .col{width:23.9%;}}
 
3 ширина media в em , контейнера в процентах
@media (min-width:80.063em) {.col{width:20%}} 
 
4 редко бывает такое
@media screen and (max-width : 520px), screen and (-webkit-min-device-pixel-ratio : 1.3) and (max-width : 640px) and (orientation : landscape),screen and (-webkit-min-device-pixel-ratio : 1.3) and (max-width : 480px) and (orientation : portrait),screen and (-o-min-device-pixel-ratio: 13/10) and (max-width : 640px) and (orientation : landscape),screen and (-o-min-device-pixel-ratio: 13/10) and (max-width : 480px) and (orientation : portrait),screen and (min-resolution: 1.3dppx) and (max-width : 640px) and (orientation : landscape),screen and (min-resolution: 1.3dppx) and (max-width : 480px) and (orientation : portrait) {...  }
Вопросы
 
Почему ширину контейнера не пишут в сантиметрах или дюймах, так ведь проще?
 
Каковы хорошие и плохие стороны всех этих подходов?
 
Я могу выбрать кажется любой... Какой из приведенных вариантов лучше?
Я имею ввиду верстаем новый сайт (без динамических заморочек) с видом на будущее, и чтобы с изображениями было и пользователю хорошо и мне просто. 
Link to comment
Share on other sites

  • 0
Почему ширину контейнера не пишут в сантиметрах или дюймах, так ведь проще?
 

Потому что сантиметры и дюймы в CSS переводятся в пиксели и мало как связаны с реальностью. Совершенно бесполезные единицы.


Каковы хорошие и плохие стороны всех этих подходов? Я могу выбрать кажется любой... Какой из приведенных вариантов лучше?
 

При использовании этих вариантов будет разное поведение. Какое вам нужно, то и используйте.

Link to comment
Share on other sites

  • 0

Вот меня и интересует это разное поведение.

 

Задавал подобный вопрос на блогах. Отвечали точно так-же. 
Чуть подробнее пожалуйста.
 
Я правильно понял что отличие в мобильниках минимальное?  
 
Вот как я это вижу: 
 
2 вариант - вроде все просто и понятно - резина. фотографии подстраиваются, кажется вариант с тяжелыми фотографиями. 
 
1 вариант - Простой, пожалуй мне будет с ним легче. непонятно как работает совместно с meta_name="viewport". 
 
3 вариант - вроде - резина, как 2 вариант. зачем нужно было переводить  media в em? 
 
4 вариант - у меня вызывает сомнения, сильно вумно. Правильно ли я думаю, что через год-два возможно понадобится переделывать?  
 
 
Может есть какие либо рекомендации? Типа - Лучше выбрать такой вариант:
- для быстрой загрузки сайта
- для подстройки шрифта 
- для удобных-легких-больших фотографий 
 

Какой из вариантов удобно-просто использовать для экранов повышенного разрешения (для изображений)? 

Edited by autit
Link to comment
Share on other sites

  • 0
непонятно как работает совместно с meta_name="viewport". 

Все эти варианты имеют смысл только с meta viewport.

Может есть какие либо рекомендации? Типа - Лучше выбрать такой вариант: - для быстрой загрузки сайта - для подстройки шрифта  - для удобных-легких-больших фотографий 

Всё это никак не связано с @media.

Link to comment
Share on other sites

  • 0

Я не удовлетворен, но перейдем к следующему. 

 

Разрешение мобильников каждый год увеличивается. 

Сейчас у меня возник вопрос как с помощью @media отделить CSS : 

- для мобильников  с экраном width:1280px

- для ПК  с экраном width:1280px

 

Можно ли это сделать только с помощью  CSS?

Link to comment
Share on other sites

  • 0

Как закончить вот эти правила

@media (min-width:1025px) and (max-width:1280px)...для мобильника... {.container {width:100%;} }@media (min-width:1025px) and (max-width:1280px)... для ПК... {.container {width:960px;} }
Edited by autit
Link to comment
Share on other sites

  • 0

Мобильнику из новых хочу подсунуть вариант сайта с одной колонкой. Реально то он все равно узкий.

А, ПК с той же шириной экрана width:1280px - вариант с двумя колонками.

Edited by autit
Link to comment
Share on other sites

  • 0

Мобильнику из новых хочу подсунуть вариант сайта с одной колонкой. 

А, ПК с той же шириной экрана width:1280px - вариант с двумя колонками.

Зачем? Место же хватит и для 2 колонок. Зачем урезать функционал?

Link to comment
Share on other sites

  • 0

Функционал не будет урезан. 

 

Задумался... Может я не понимаю в другом месте. 

 

Вопрос Про мобильные устройства.
Вот пример 
Apple iPhone 6 Plus 64Gb   написано разрешение 1080x1920px   401ppi    масштабирование 2,6 
А реально это 414x736px. Наших пикселей
На сайте установлен meta
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
Когда этот мобильник реагирует на @media , считает изначально что его ширина 1080px или 414px Наших пикселей? 
Link to comment
Share on other sites

  • 0
 

Непонятки с этой шириной...  

Я тоже раньше так думал, а сейчас засомневался. Погуглил и вот что нашел 

 

На сервисе тестирования 

http://quirktools.com/screenfly/

выбрать Mobile 

написано Apple iPhone 6 Plus  - 414x736px        как это понимать?

 

 

специально для iPhone 6+  пишут

/* ———-- iPhone 6+ ———-- *//* Portrait */@media only screen   and (min-device-width: 414px)   and (max-device-width: 736px)   and (-webkit-min-device-pixel-ratio: 3)  and (orientation: portrait) { ... }/* Landscape */@media only screen   and (min-device-width: 414px)   and (max-device-width: 736px)   and (-webkit-min-device-pixel-ratio: 3)  and (orientation: landscape) { ... }

 

Но под каждый мобильник писать @media у меня нет желания.. 
 
Будет ли iPhone 6+  реагировать одновременно и на 
@media (min-width:1060px) and (max-width:1920px){ ... }

такой запрос?

 

Как вы считаете, сервис тестирования _http://quirktools.com/screenfly/  хороший? 

Edited by autit
Link to comment
Share on other sites

  • 0

Непонятки с этой шириной...

Я тоже раньше так думал, а сейчас засомневался. Погуглил и вот что нашел

На сервисе тестирования

http://quirktools.com/screenfly/

выбрать Mobile

написано Apple iPhone 6 Plus - 414x736px как это понимать?

специально для iPhone 6+ пишут

/* ———-- iPhone 6+ ———-- *//* Portrait */@media only screen   and (min-device-width: 414px)   and (max-device-width: 736px)   and (-webkit-min-device-pixel-ratio: 3)  and (orientation: portrait) { ... }/* Landscape */@media only screen   and (min-device-width: 414px)   and (max-device-width: 736px)   and (-webkit-min-device-pixel-ratio: 3)  and (orientation: landscape) { ... }
Но под каждый мобильник писать @media у меня нет желания..

Будет ли iPhone 6+ реагировать одновременно и на

@media (min-width:1060px) and (max-width:1920px){ ... }
такой запрос?

Как вы считаете, сервис тестирования _http://quirktools.com/screenfly/ хороший?

есть физические пиксели, а есть css пиксели, если бы у 6 айфона css пиксели ровнялись физическим, то вы бы ничего не увидели, т.к все было бы очень маленькое. Поэтому у 6+ они они как бы "сжимаются" до 736x414

у меня на ретина макбуке например, 2560--> 1440

http://www.canbike.org/CSSpixels/

Edited by swandev
Link to comment
Share on other sites

  • 0
есть физические пиксели, а есть css пиксели, если бы у 6 айфона css пиксели ровнялись физическим, то вы бы ничего не увидели, т.к все было бы очень маленькое. Поэтому у 6+ они они как бы "сжимаются" до 736x414 у меня на ретина макбуке например, 2560--> 1440 http://www.canbike.org/CSSpixels/
 

Не понял. А разве meta viewport масштабирование не отменяет?

Link to comment
Share on other sites

  • 0

Отменяет,

я понял так -

Если ширина viewport не указана, то:
для мобильного Safari это 980px
Opera — 850px
Android WebKit — 800px
IE — 974px
И затем, то что получилось масштавируется под экран.

а если указана, 

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

отменяются эти значения. 

И мы получаем это _http://www.canbike.org/CSSpixels/   width=device-width

Для Apple iPhone 6 Plus -  414x736px

 

 

есть физические пиксели, а есть css пиксели, если бы у 6 айфона css пиксели ровнялись физическим, то вы бы ничего не увидели, ...

 

Я про это и раньше знал.  

 

 

swandev 

У меня беда, по ангийски почти не понимаю, а на русском языке ВСЕ статьи которые посвящены этой теме переводные или авторы сами не понимают о чем пишут. 

Просьба обьяснить Как мобильники ... обрабатывают странички. 

 

... писать про это долго, поэтому желательно ссылочки на ПРАВИЛЬНЫЕ статьи . 

Темы

Как мобильники обрабатывают ширину странички. (старые мобильники, новые, и что предположительно будет через пару лет)

Как мобильники обрабатывают meta viewport  content=width=device-width при смене ориентации. ( или что происходит в мобильнике при смене ориентации?)

Как мобильники обрабатывают ширину изображений

Как мобильники обрабатывают высоту текста, (почему именно Em, и почему многие все равно пишут px). 

Физические пиксели, и css пиксели - я знаю что они есть, но не понял что из этого следует...

Edited by autit
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By MultiGramen
      Есть тестовый сайт: http://multigramen.ru/
      Между картинкой и меню создался какой-то белый отступ, и я не могу удалить его, чтобы элементы приклеились друг ко другу:

      Если вырезать следующий код:
      <a class="header_logo"> <img class="header_photo" src="img/header.png" width="100%"> </a> то меню приклеивается и всё в порядке, хотя в CSS, по сути, нет отступов, которые мешались бы:
       
      .header_logo { flex:0 0 40px; } .header_photo { display:none; }
      Сайт имеет мобильную версию. Код сейчас разбит на два медиа-запроса: max-width:767px и min-width : 768px

      Помогите понять, как убрать этот пробел, не затронув другие элементы. Уже несколько дней ковыряюсь с этой проблемой, даже в коде запутался..
    • By Spllit
      Столкнулся с такой проблемой, что Avocode неверно определяет тощину шрифта на макете в отличии от Photoshop.  
      На скринах видно, что Avocode показвает, что толщина выделенного текста 400px. Однако Photoshop показывает, что выделенный текст имеет толщину extrabold, что равняется 800px. 
      С чем это может быть связано и как это пофиксить


    • By vkapas
      Подключаю с Google Fonts Open Sans Condensed, но какому бы не элементу не присваивал, вместо него браузер всегда рендерит системный шрифт — Liberation Serif в Ubuntu и Times New Roman в Windows.
      Другие шрифты, Open Sans или Roboto, например, применяются исправно, а именно с Open Sans Condensed загвоздка. Подключаю так (на самом деле эту строку генерит шаблон Drupal, я только указываю название шрифта в настройках темы):
      <link type="text/css" rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans+Condensed" media="all"> В итоге:
       
       
      В чём может быть причина такого поведения?
    • By Temiks
      Здравствуйте.
      При выделении подключаемый шрифт на сайте рендерится по разному на macOS и Windows.
      Браузер Chrome последней версии.
      Вот так шрифт отображается на ОС Windows - идеально расположен по центру

       
      А вот так уже на macOS. Шрифт смещен с центра к верху.

       
      Сталкиваюсь не в первый раз с этой проблемой. В чем может быть проблема? Возможно кто-то сталкивался с подобным? В какую сторону копать в таком случае?
    • By Frogg
      Здравствуйте, я бы хотел использовать пиксельных шрифт на сайте, скачал его из интернета, но не понял как использовать его.
      Интернет обсёрфил, не нашёл.
      Помогите пожалуйста.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy