Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » Google Map Api глючит на мобилах

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

daudin



Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Привет.
 
Взялся делать мобильную версию сайта, столкнулся со следующей проблемой:
При интеграции Google Map на мобильный сайт, по непонятной причине перестает работать (в частности на андроиде) автоматическое уменьшение сайта до размеров экрана. Другими словами, сайт открывается большой и не вписывается в экран мобилы. Побывал ту же верстку но без Api все нормально, проблема возникает при подключенном коде Google Map.
 
Подскажите как решить эту проблему. Ссылка на сайт для ПК, аналогичная ссылка для мобилы.

Всего записей: 6 | Зарегистр. 26-05-2015 | Отправлено: 13:14 26-05-2015 | Исправлено: daudin, 13:38 26-05-2015
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
daudin
все очень просто.. ширина в 100% не учитывает то, что вы сделали left: 70 при абсолютном позицинировании. в этом случае используется полная ширина окна, поэтому возникает подобный эффект "заползания", так как в определенный момент этот сдвиг в 70 пикселей начинает играть роль, так как ширина канваса в 95% в какой то момент станет больше, чем ширина окна + 70 пикселей.

Всего записей: 15128 | Зарегистр. 20-09-2014 | Отправлено: 23:07 26-05-2015 | Исправлено: Mavrikii, 23:09 26-05-2015
daudin



Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Я понял, буду экспериментировать... но скорее всего это не сработает, так как без подгрузки API уменьшается не только ширина, но и размеры шрифтов - уменьшаются размеры абсолютно всего, чтобы вписать в экран мобилы.
 
А если подключаешь API не уменьшается вообще ничего - в этом проблема, сам алгоритм "Уменьшения" окна в браузере не срабатывает.
 
Насколько я могу судить: браузер сначала загружает страницу, а затем пропорционально уменьшает все элементы, что-бы вписать все в экран мобилы. API каким то образом блокирует это свойство браузера.
 
Хочу попробовать подгружать API через интервал времени, после загрузки страницы.
 
Спасибо за ответ, буду пробовать.  
 

Всего записей: 6 | Зарегистр. 26-05-2015 | Отправлено: 11:50 27-05-2015
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
daudin
вы не поняли о чем речь вообще.
показываю пример
http://jsfiddle.net/o4wkvmv8/
появление горизонтального скролла видите? это потому, что 100% ширины сдвинуто вправо, как сделано у вас
 
и даже если вы сделаете 90% ширины, попробуйте уменьшить ширину окна - http://jsfiddle.net/o4wkvmv8/1/
рано или поздно, но сдвиг + 90% ширины окажутся больше, чем ширина той части окна, что находится правее 70 пикселей. а именно когда эти 70 пикселей = 10% ширины окна, далее 70 пикселей будут представлять больше и больше, в процентах, ширину окна, а в сумме с 90% это даст цифру более 100, отсюда и такой результат.
 
 
если уж что то делаете с абсолютным позиционированием, то иногда удобнее задавать не ширину элемента, а положение его правой границы - http://jsfiddle.net/o4wkvmv8/2/

Всего записей: 15128 | Зарегистр. 20-09-2014 | Отправлено: 19:34 27-05-2015 | Исправлено: Mavrikii, 19:44 27-05-2015
daudin



Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Подробнее...
 
Добавлено:
Блин теги MORE добавляются автоматом, гон какойто, как сделать чтобы они не добавлялись..

Всего записей: 6 | Зарегистр. 26-05-2015 | Отправлено: 15:54 29-05-2015 | Исправлено: daudin, 15:58 29-05-2015
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
daudin

Цитата:
Блин теги MORE добавляются автоматом, гон какойто, как сделать чтобы они не добавлялись..

не писать длинные сообщения или стать активным участником форума - это такая защита от простынь у новичков )
 
да не нужно мне через мобилу - полно средств позволяющих ее имитировать
та же Opera Mobile Emulator
я вам в дцатый раз повторяю, что причина именно в этом!
 
сейчас нормально отображает? только не так при очень узком экране, но это потому, что у вас задан min-width

Всего записей: 15128 | Зарегистр. 20-09-2014 | Отправлено: 19:39 29-05-2015
daudin



Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Все осталось как и было . Ну я так и полагал в принципе в третьем посте...
На мобиле все неприлично большое - не помещается даже в три экрана, а вот без Goggle Map Api все прекрасно помещается, хоть на маленькой, хоть на большой, хоть с width:100%;left:71px; хоть с width:auto;right:20px;left:71px. Как только подключаешь Goggle Map Api - все становится большим и шрифты и блоки, даже уменьшение в браузере не пашет, с любым вариантом CSS! - на лицо конфликт JS.
 
Пока вы через мобилу не посмотрите, не поймете..

Всего записей: 6 | Зарегистр. 26-05-2015 | Отправлено: 19:53 29-05-2015 | Исправлено: daudin, 19:56 29-05-2015
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
daudin
дык об этом бы и писали сразу - что не тот размер шрифта и так далее.
я то думал проблема в том, что канвас начинает выползать за экран.
 
попробуйте добавить в мету width=device-width
например так  

Цитата:
<meta name="viewport" content="width=device-width, initial-scale=1">

ощущение, что просто не знает какую ширину использовать. и уберите user-scalable=no
 
ps: переключиться в мобильную версию можно и в IE (F12, далее выбрать мобильный браузер)

Всего записей: 15128 | Зарегистр. 20-09-2014 | Отправлено: 20:55 29-05-2015 | Исправлено: Mavrikii, 21:06 29-05-2015
daudin



Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Добавил
 

Цитата:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no ">  

 
Теперь везде не уменьшается , пока закоментировал, хочу разобраться с этим мета тегом, спасибо за наводку, будем почитать.

Всего записей: 6 | Зарегистр. 26-05-2015 | Отправлено: 09:56 30-05-2015
daudin



Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Нашел решение проблемы, оказывается Google Map Api сам добавляет мета тег viewport, его убрал - стало все в норме.
Спасибо, пригодились все ваши рекомендации.

Всего записей: 6 | Зарегистр. 26-05-2015 | Отправлено: 12:00 03-06-2015 | Исправлено: daudin, 12:01 03-06-2015
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » Google Map Api глючит на мобилах


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru