#php #css #mobile
#php #css #Мобильный
Вопрос:
Следующий код является частью включаемого файла, который имеет заголовок для веб-сайта.
<head>
<link rel="shortcut icon" href="favicon.ico">
<meta charset="utf-8" />
<title>Test Site | Foo The Bar </title>
<link rel="stylesheet" href="csss_standard.css">
</head>
<body>
<div id="big_wrapper">
<header id="Header">
<a href="homepage.php"><img src="home_page_art.png" alt="Logo"></a>
</header>
<div id="navigation">
<ul>
<li id="page_1"><a href="page1.php">Page 1</a></li>
|
<li id="page_2"><a href="page_2">Page 2</a></li>
|
<li id="Page_3"><a href="page_3.php">Page 3</a></li>
|
<li id="page_4"><a href="page_4">Page 4</a></li>
|
<li id="news"><a href="news_and_such.php">Page 5</a></li>
</ul>
</div>
</div>
<br>
<br>
</body>
На настольном сайте это выглядит великолепно. Все размеры правильно. Но когда дело доходит до его размещения на мобильном сайте, сайт, похоже, соответствует размеру центрального раздела «мясо и картошка», куда я помещаю весь контент. Div — это один столбец, и его ширина явно объявлена как 1000 пикселей, как показано ниже.
#meat_and_potatoes{
display:block;
text-align:center;
padding: 15px;
width:1000px;
text-align:center;
margin-left:auto;
margin-right:auto;
float:center;
background:#D8D8D8;
box-shadow: 1px 0px 20px 0px rgba(50, 50, 50, 0.75);
}
заголовок и #Заголовок div css ниже.
#Header{
margin: 0px 0px;
display:block;
width:105%; <!-- this was originally not a property. I was toying around with it to no avail... -->
/* orange gradiant */
background: rgb(255, 180, 0);
background: -moz-linear-gradient(90deg, rgb(255, 180, 0) 51%, rgb(255, 216, 0) 100%);
background: -webkit-linear-gradient(90deg, rgb(255, 180, 0) 51%, rgb(255, 216, 0) 100%);
background: -o-linear-gradient(90deg, rgb(255, 180, 0) 51%, rgb(255, 216, 0) 100%);
background: -ms-linear-gradient(90deg, rgb(255, 180, 0) 51%, rgb(255, 216, 0) 100%);
background: linear-gradient(180deg, rgb(255, 180, 0) 51%, rgb(255, 216, 0) 100%);
height: auto;
float:left;
padding-left:10px;
}
header, section, footer, aside, nav, article, hgroup{
display:block;
}
Как я уже говорил выше, мобильный вид автоматически подстраивается под этот центральный div. Нравится ли мобильному устройству явно объявленная ширина? Может ли проблема заключаться в коде для заголовка, находящегося в .inc? (Я скорее сомневаюсь в этом просто потому, что я протестировал источник на фактической странице ниже практически каждого тега div) Может ли это быть проблемой с представлениями CSS для мобильных устройств или настольных компьютеров? (Например, относительный тип «screen»)
Я понимаю, что в этой проблеме много движущихся частей, поэтому, если нужно что-то еще, пожалуйста, дайте мне знать.
Комментарии:
1. Эй, Эндрю, почему бы тебе не оптимизировать сайт для мобильных устройств? Тогда вам не нужно беспокоиться о том, как настольный css влияет на мобильный css. Просто используйте «медиа-запросы» 🙂
2. @damienhawks Это то, что я имел в виду выше! Я просто забыл слово ха-ха 🙂 Итак, вы предлагаете добавить один css для мобильных устройств (скажем, до 800 пикселей) и один для рабочего стола?
Ответ №1:
Эндрю надеюсь, это даст вам лучшее представление о размерах, для которых вы должны написать медиа-запрос:-
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Пишите медиа-запросы в зависимости от аудитории, которую вы также хотите обслуживать, я бы выбрал первый, если бы мне пришлось написать только один, потому что он охватывает большинство смартфонов. Пожалуйста, продолжайте и устраните любые сомнения, которые у вас есть, и спросите меня обо всем, что вы чувствуете по этому поводу. Хотел бы помочь вам в дальнейшем.
Комментарии:
1. Вау! Какой отличный ресурс, мой друг. Есть ли способ заблокировать ориентацию страницы только на книжную или лучше всего также записать альбомную ориентацию? (Я думаю, что, возможно, я ответил на свой собственный вопрос. Просто хотел узнать ваше мнение.)
2. Я думаю, что достаточно написать общий для обоих. Но тогда зависит от того, что некоторым людям нравится рассматривать все виды, я видел, что большинство использует портрет, а не пейзаж. Я бы посоветовал вам проверить это: — sitepoint.com/how-to-use-orientation-on-your-mobile-sites и я надеюсь, что это ответ на ваш вопрос, если нет, пожалуйста, прокомментируйте еще раз: D