BG Development


Страници: (3) [1] 2 3   ( Първото ново мнение ) Reply to this topicStart new topicStart Poll

> Проблем с мобилни браузъри...
johnfound
Публикувано на: 20-03-2020, 21:12
Quote Post


Group Icon
Име:
Група: VIP
Ранг: Почетен член

Мнения: 7796
Регистриран на: 27.05.04



Докато си играя с веб дизайн, забелязах една гадна особеност на някои андроидски браузъри, доколкото разбрах Хром и/или производни.

Номерът се състои в това, че една ивица най-отдолу на страницата се закрива от служебните бутони - там триъгълник, квадрат и кръг. Същата страница във Firefox за андроид излиза нормално - края на страницата е над тези бутони.

Ефекта изглежда все едно прозореца на браузъра не се е оразмерил правилно и се намира под системните бутони.

Какво бъркам?


--------------------
asm32 - Приложно програмиране на асемблер.
Tox: 48C0321ADDB2FE5F644BB5E3D58B0D58C35E5BCBC81D7CD333633FEDF1047914A534256478D9
PMEmail PosterUsers Website
Top
thrawn
Публикувано на: 21-03-2020, 08:41
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 2769
Регистриран на: 17.01.17



Че пишеш css -a.
Използвай някоя библиотека. Не че е философия да го пишеш сам, но има толкова много браузери и платформи, че е несериозно да смяташ, че можеш да ги покрием всичките. Затова си плзвай нещо готово и не се занимавай с глупости.

Най-големите проблем при браузърите е определянето на височината на елементите. От там ти идват и проблемите. Трябва да ползваш модерен лейаут който от своя страна трябва да се поддържа от браузер. Иначе жулиш с js да преорязмеряваш контейнерите.

Това мнение е било редактирано от thrawn на 21-03-2020, 08:44
PMEmail Poster
Top
rvc
Публикувано на: 22-03-2020, 15:38
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 2550
Регистриран на: 13.05.11



освен да пробваш да разбереш мобилния браузър още в бекенд-а и да вмъкнеш допълнителен CSS файл с едно отстояние отдолу, достатъчно да не бъде закривано от служебните бутони.

опитай с това http://mobiledetect.net/
PMEmail PosterUsers Website
Top
johnfound
Публикувано на: 22-03-2020, 16:48
Quote Post


Group Icon
Име:
Група: VIP
Ранг: Почетен член

Мнения: 7796
Регистриран на: 27.05.04



Явно нещо въпросът не е бил ясен. Въпросът е: "Защо става така? Какво точно се случва?"

Защото това не е обичайно. Тоест, показвайки страница в браузър човек очаква всяка част от нея да е видима освен ако страницата е форматирана така, че да крие част от съдържанието си.

Тоест в случая може браузърът да форматира страницата по начин, че част от нея не е видима.

Или пък обратно - браузърът да форматира и показва всичко правилно, но неговият прозорец да е частично закрит от системните бутони.

Все пак в Андроид не мога да дръпна или оразмеря прозореца с мишката и да видя каква е причината...

П.П. Въобще, става въпрос за тази страница: https://board.asm32.info/!chat

Това мнение е било редактирано от johnfound на 22-03-2020, 16:50


--------------------
asm32 - Приложно програмиране на асемблер.
Tox: 48C0321ADDB2FE5F644BB5E3D58B0D58C35E5BCBC81D7CD333633FEDF1047914A534256478D9
PMEmail PosterUsers Website
Top
PxL
Публикувано на: 22-03-2020, 16:58
Quote Post


Group Icon
Име: Димитър Т. Димитров
Група: VIP
Ранг: Почетен член

Мнения: 3446
Регистриран на: 26.04.05



Ти обаче както "не се занимаваш с уеб" се "разцепи" от уеб решения в последно време icon_smile.gif


--------------------
void putchar(char c);int main(){int x,c=1,i;for(i=0;(x="PxLY2H4:2E;7231?=68255A5S5P9N:N9O84111H861I85111G9N:O811O812M<G33911EAEDBECE22169D1=2k"[i+++3]);)while(x-->'0')putchar((!(++c%'('))?0x0a:33^(i&1));}
PMEmail PosterUsers Website
Top
johnfound
Публикувано на: 22-03-2020, 17:15
Quote Post


Group Icon
Име:
Група: VIP
Ранг: Почетен член

Мнения: 7796
Регистриран на: 27.05.04



QUOTE (PxL @ 22-03-2020, 17:58)
Ти обаче както "не се занимаваш с уеб" се "разцепи" от уеб решения в последно време icon_smile.gif

Факт. Но това го разглеждам главно като разширяване на кръгозора и донякъде като начин за трениране на хуманитарно-художествените си способности.

И винаги съм казвал, че дизайнерите ми липсват в този форум. Нарушава се баланса. icon_wink.gif


--------------------
asm32 - Приложно програмиране на асемблер.
Tox: 48C0321ADDB2FE5F644BB5E3D58B0D58C35E5BCBC81D7CD333633FEDF1047914A534256478D9
PMEmail PosterUsers Website
Top
thrawn
Публикувано на: 22-03-2020, 17:36
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 2769
Регистриран на: 17.01.17



То проблема май не ти е само там...

Казах ти, проблемът е във височината. Трябва ти или съвременен цсс койо не се поддържа на всякъде (и за това хората ползват външни библиотеки, щото са тествани и се тестват на огромна гама устройства) или да се придържаш към стандартен цсс2 и html + JavaScript.

Другия вариант е да се откажеш от дизайн залагащ на точно засадени височини на елементи.

Това мнение е било редактирано от thrawn на 22-03-2020, 17:40

Прикачена картинка (Кликнете на картинката, за да я увеличите!)
Прикачена картинка
PMEmail Poster
Top
johnfound
Публикувано на: 23-03-2020, 13:35
Quote Post


Group Icon
Име:
Група: VIP
Ранг: Почетен член

Мнения: 7796
Регистриран на: 27.05.04



Така или иначе го оправих...


--------------------
asm32 - Приложно програмиране на асемблер.
Tox: 48C0321ADDB2FE5F644BB5E3D58B0D58C35E5BCBC81D7CD333633FEDF1047914A534256478D9
PMEmail PosterUsers Website
Top
bvbfan
Публикувано на: 23-03-2020, 15:05
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 3544
Регистриран на: 08.12.13



Добре е да кажеш как, друг път тази тема ще е от полза.


--------------------
QUOTE (Bender @ 23-04-2015, 19:11)
Xamarin: ЛАПАЙ!
Ти: Добре...
PMEmail Poster
Top
johnfound
Публикувано на: 23-03-2020, 16:27
Quote Post


Group Icon
Име:
Група: VIP
Ранг: Почетен член

Мнения: 7796
Регистриран на: 27.05.04



QUOTE (bvbfan @ 23-03-2020, 16:05)
Добре е да кажеш как, друг път тази тема ще е от полза.

Аз знам, че е добре. Но не съм сигурен, че имам правилното обяснение. icon_lol.gif icon_lol.gif icon_lol.gif

Значи, основния сайт има стил body {min-height: calc (100vh - 2*marginY)}

Това го правя, за да не се вдига footer-а на страницата когато страницата има твърде късо съдържание - например 1..2 поста с късо съдържание.

На страницата на чата обаче, се въвежда още едно форматиране: body {position: absolute; left: 0; right: 0; top:0; bottom: 0; overflow: hidden;} тъй като чата се разтяга винаги на целия екран.

Явно обаче, гугълските браузъри, независимо от абсолютното позициониране, вземат предвид и min-height-а и пренебрегвайки top и bottom, разтягат body-то повече от размера на екрана. И едновременно забраняват скролването.

Firefox обработва приоритетите правилно и пренебрегва стойността на min-height, когато позиционирането е абсолютно.

Проблема се оправи, като в стиловете на чата добавих и "min-height: 0";



--------------------
asm32 - Приложно програмиране на асемблер.
Tox: 48C0321ADDB2FE5F644BB5E3D58B0D58C35E5BCBC81D7CD333633FEDF1047914A534256478D9
PMEmail PosterUsers Website
Top
1 потребители преглеждат тази тема в момента (1 гости, 0 анонимни потребители)
Потребители, преглеждащи темата в момента:

Topic Options Страници: (3) [1] 2 3  Reply to this topicStart new topicStart Poll

 


Copyright © 2003-2019 | BG Development | All Rights Reserved
RSS 2.0