#php #iphone #css #ipad
#php #iPhone #css #iPad
Вопрос:
Я пытаюсь закончить сайт для брата моего друга, и все (почти) работает нормально.
Сайт построен с использованием контейнера по центру, занимающего примерно 15-20% пространства с левой стороны.
Проблема в том, что, когда вы открываете его на iPhone или iPad, сайт масштабируется так, что пространство с левой стороны удаляется, текст начинается именно там, где начинается экран. Надеюсь, я правильно это объясняю.
Есть ли простой способ изменить это только для мобильных устройств? Жаль, что у меня нет никакого опыта, когда дело доходит до проектирования для телефонов..
Заранее спасибо!
Комментарии:
1. как вы оставляете поле на html-странице? возможно, это не поддерживается на устройстве iPhone. Какую версию HTML вы используете? На каком iPhone вы его тестировали (3G, 4 или другом).
Ответ №1:
Вы используете проценты для перемещения контейнера влево?
Вы уверены, что не присвоили контейнеру фиксированное значение width и margin:0 auto; с помощью CSS? А затем поместите этот мета-тег в начало веб-страницы HTML, чтобы телефоны обрабатывали его правильно?
<meta name="viewport" content="width=device-width; initial-scale=1.0;maximum-scale=1.0;" />
Потому что, насколько я знаю, вы используете margin:0 auto; метод центрирования.
Например, добавьте контейнеру некоторое дополнение padding:1em; , и все должно быть в порядке. 🙂
Комментарии:
1. Извините, я не перенес его с процентами, ширина установлена на 100% с помощью css, с 0 отступами и полями, необходимо ли автоматическое? Спасибо за вашу помощь! Поможет ли нам этот мета-тег?
2. мета-тег изменяет размер представления таким образом, что оно занимает только необходимое пространство на телефоне (я тестировал только с андроидами). Если его ширина равна 100%, то как вы получаете интервал слева?
3. Хм, я это еще не исправил. Друг смотрит на это прямо сейчас, но, похоже, это гораздо сложнее, чем я думал. URL-это seorapport.se (временное). На рабочем столе это отображается нормально, но на iphone пространство удалено.. Мы смотрим на это .. У вас есть какие-нибудь идеи? Спасибо, брат.
4. судя по всему, вам просто нужно добавить немного отступов. но вам нужно сделать это для каждого элемента, который касается сторон, например
.port { padding:0 10px; }вы можете захотеть уменьшить ширину в соответствии с дополнительным заполнением, похоже, это большая работа, поэтому я посмотрю еще раз завтра.5. Большое вам спасибо. Ну, я не знаю, требует ли это много работы, сайт работает с включением menu.php, main.php (индекс) и footer.php . Под ним около 30 страниц, но они управляются style.css, который является глобальным. Возможно, мне не нужно так сильно менять. Но было бы намного проще, если бы был мета-тег или что-то еще, что могло бы изменять размер сайта при доступе с iphone 🙂 Спасибо @YuriKolovsky
Ответ №2:
Вы можете включить css в заголовок страницы, посмотрев на его параметр устройства
<style type="text/css" media="screen and (max-device-width: 480px)">
/*for iphone only*/
</style>
ИЛИ другой способ — создать css-файл mobile.css только для мобильных устройств и включить этот css с помощью javascript, приведенного ниже:-
<script type="text/javascript">
// checking if the device is iphone, ipod or ipad
if ((navigator.userAgent.indexOf("iPad") > 0)
|| (navigator.userAgent.indexOf("iPod") > 0)
|| (navigator.userAgent.indexOf("iPhone") > 0)) {
// including the css file
document.write("<link href='mobile.css' rel='stylesheet' type='text/css' />");
}
</script>
Комментарии:
1. Я попробовал первый опубликованный вами код, и я думаю, что он сработает. Я просто не знаю, как изменить размер сайта для iphone, чтобы он добавил немного места. Как на apple.com это дает пространство размером 5-10 пикселей, которое мне бы отлично подошло.