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
Физические пиксели, и css пиксели - я знаю что они есть, но не понял что из этого следует...

У вас с meta viewport это будет одно и тоже.

 

 

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

Не очень понял. при смене ориентации в мобильнике просто как будто меняется местами ширина и высота. То есть если было 100x200, то станет 200x100.

 

 

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

Также, как и компьютеры.

 

 

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

Также, как и компьютеры, но если текст слишком мелкий - они его увеличивают.

 

 

 

P.S.: Вот эмулятор Android, сами потестируйте: https://www.manymo.com/

Edited by afdw
Link to comment
Share on other sites

  • 0
У вас с meta viewport это будет одно и тоже.

Вообще-то в общем случае нет.

 

желательно ссылочки на ПРАВИЛЬНЫЕ статьи
 

Вот неплохой перевод классической статьи PPK (уже заслуженной, но всё еще актуальной): http://www.beskrovnyy.com/verstka/skaz-o-dvux-vyuportax-chast-vtoraya/

Link to comment
Share on other sites

  • 0

Насколько я знаю, это можно сделать, только определив конкретный девайс (напр. по User-Agent на сервере) и подсунув ему персональный meta viewport с соответствующей width. Но зачем это делать? Много ли проку от раскладки для FullHD-мониторов на телефоне?

Link to comment
Share on other sites

  • 0

Я вот тоже не понимаю зачем это, ставьте width=device-width и не думайте там о всяких физических пикселях, с каждым годом их все больше и больше будут делать в телефонах, но они будут настолько маленькие что разницы никакой не заметите, поэтому и есть такое понятие как css пиксели

Link to comment
Share on other sites

  • 0

 

 

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

Не очень понял. при смене ориентации в мобильнике просто как будто меняется местами ширина и высота. То есть если было 100x200, то станет 200x100.

 

 
В статье есть про это, но как-то не очень ясно.
Поясню. Загрузился сайт, получил
<meta name="viewport" content="width=device-width, initial-scale=1.0">@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;}}
Мобильник был в положении портрет, загрузилась версия с одной колонкой шириной 320.  
поменяли ориентацию.
Судя по вышеприведенной статье content=width=device-width  "удерживает" вьюпорт страницы прежним и в него встраивает версию сайта с двумя колонками шириной 768.
В два раза шире... не факт что влезет в экран полностью.
Получается что то не то или я плохо понял?
 
 

 

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

Также, как и компьютеры.

 
Я неправильно поставил вопрос. 
 
Какой сейчас есть простой хороший метод для Подстраиваемых изображений
Делаю сайт с видом на будущее. Перекраивать большое количество фотографий у меня нет желания. В будущем ретина дисплей видимо будет применяться... но судя по статье даже продвинутые в 2011 не знали к чему дело пойдет... 
 
Как   Подстраиваемые изображения  можно сделать средствами  CSS и media запросами? 
Цель подсунуть мобильникам только ту фотографию, которая хорошо смотрится на данном экране, а другие варианты не загружать.
Ссылочку пожалуйста.
 
Ну, например такой подход я встречал 
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">@media (min-device-width:600px) {img[data-src-600px] {content: attr(data-src-600px, url);}}@media (min-device-width:800px) {img[data-src-800px] {content: attr(data-src-800px, url);}}

Желательно ссылку где упомянуто какие браузеры этот подход поддерживают. 

 
 

 

Вот неплохой перевод классической статьи PPK (уже заслуженной, но всё еще актуальной): http://www.beskrovnyy.com/verstka/skaz-o-dvux-vyuportax-chast-vtoraya/

 

 

Кое что новое для себя нашел, но старовата. Сейчас браузеры уже другие. 

 

Просьба еще несколько ссылок с современными статьями. 

 

Особенно меня интересует тема, которую поднимал выше. 
Какой из этих двух подходов можно назвать лучшим, с точки зрения взгляда на будущее? И чтобы Подстраиваемые изображения было просто/удобно вставлять. 
@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: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%;}}
 
Link to comment
Share on other sites

  • 0
Желательно ссылку где упомянуто какие браузеры этот подход поддерживают. 
 

http://caniuse.com/


  В статье есть про это, но как-то не очень ясно. Поясню. Загрузился сайт, получил@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;}} Мобильник был в положении портрет, загрузилась версия с одной колонкой шириной 320.   поменяли ориентацию. Судя по вышеприведенной статье content=width=device-width  "удерживает" вьюпорт страницы прежним и в него встраивает версию сайта с двумя колонками шириной 768. В два раза шире... не факт что влезет в экран полностью. Получается что то не то или я плохо понял?
 

Ничего там не удерживается. Ещё раз говорю, посмотрите сами в эмуляторе Android.

Link to comment
Share on other sites

  • 0

 

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

Очень сложно отвечать на ваши вопросы, которые все в одном большом сообщении.

@media    only screen and (-webkit-min-device-pixel-ratio: 2),    only screen and (   min--moz-device-pixel-ratio: 2),    only screen and (     -o-min-device-pixel-ratio: 2/1),    only screen and (        min-device-pixel-ratio: 2),    only screen and (                min-resolution: 192dpi),    only screen and (                min-resolution: 2dppx) {        /* */ }
Edited by swandev
Link to comment
Share on other sites

  • 0

 

Желательно ссылку где упомянуто какие браузеры этот подход поддерживают. 
 

http://caniuse.com/

 

 

поддерживают не все ... 
 
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">
Opera Mini  - не поддерживает  :(

 

UC Browser for Android   -  не поддерживает   :(
Blackberry Browser  -   :(
IE Mobile   -   :(
 
Значит ли это, что они понимают эту строку так -
<img src="image.jpg"  alt="">
 

Ничего там не удерживается. Ещё раз говорю, посмотрите сами в эмуляторе Android.

 

 

не работает ваш эмулятор. Пойду тестировать на реальных мобильниках.

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