HTML. Сделать сайт подходящим для других устройств и экранов?

Question

Недавно я «сделал» с веб-сайтом (http://calcultr.comxa.com/). Он отлично выглядит на моем экране, но на экране моих друзей он не подходит для экрана. То же самое с другими устройствами. Я добавил это в теге Head:

<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta content="text/html; charset=utf-8" http-equiv="content-type"> 
<meta name="viewport" content="width=device-width, intial-scale=1"> 

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

Спасибо. :)

Answer 1

Ваш сайт не отображается должным образом на вашем компьютере друзей, так как он имеет другое разрешение. Это сложная часть интерфейсного проектирования. Вы разработали свой сайт для ОДНОГО разрешения/устройства/экрана, теперь вы должны сделать это для остальных или, по крайней мере, придумать решение, которое работает для большинства устройств и экранов.

Эти варианты у вас есть:

1. дизайн с использованием проценты в CSS так, что ваша страница будет адаптироваться к проценту экрана пользователя. CSS - Percentages or Pixels?

2. Использование медиа-запросов для адаптации размера пикселей в соответствии с пользователями; https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 2

Как уже упоминалось,

<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta content="text/html; charset=utf-8" http-equiv="content-type"> 
<meta name="viewport" content="width=device-width, intial-scale=1"> 

... не был добавлен в верхней части исходного кода. И если вы пытаетесь сделать его отзывчивым, вы можете добавить запросы css media.

Например,

@media screen and (min-width: 480px) { 
    body { 
     background-color: blue; 
     //whatever styling... 
    } 
} 

Answer 3

Попробуйте посмотреть на загрузчике. Это очень просто, и вы можете сделать отзывчивость ко всем устройствам, просто добавив некоторые имена в свои идентификаторы и классы :) Вот link, надеюсь, что это поможет!

Answer 4

Попробуйте использовать рамки работы как бутстрапе, основы и т.д .. если вы хотите совместимость кросс-браузер для передней части конструкции