iPhone - Brak skalowania

Witam.

Naskrobałem sobie taką templatkę, ale mam problem…
Resposive jest, na Androidzie super, ale na Iphone kompletnie nie scaluje góry…

Może ktoś znajdzie rozwiązanie.

Podaje Adres, kod każdy wyciągnie.

http://id-help.pl/wipwch

Nie każdy ma pod ręką iPhona, żeby zobaczyć w czym problem. Dodaj zrzut ekranu z telefonu.

1lajk

Od biedy może trial browerstack ich emulator iPhone na macOS - z poziomu nowoczesnej przeglądarki internetowej?

Jak tak patrzę na emulatorze (iPhone 6S, iOS 9 - nowszej nie ma za darmo), to ma jakoś dziwnie rozciągnięte tła na jakiś bok (lewy górny?).

obraz

Safari i inne na niej oparte

Mozilla/5.0 (iPhone; CPU iPhone OS 9_0_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13A405 Safari/601.1

obraz

po lekkim przewinięciu w nakładce chrome

Mozilla/5.0 (iPhone; CPU iPhone OS 9_0_2 like Mac OS X) AppleWebKit/601.1 (KHTML, like Gecko) CriOS/58.0.3029.113 Mobile/13A452 Safari/601.1.46

obraz

Firefox 60 symulacja mobile

Dokładnie tak to wygląda na iOS, natomiast na androidzie nie ma problemu.

Przepraszam za nie wstawienie screnow.

Jakbym nie kombinował z wartościami obrazka, to efekt wyjściowy jest jak widać.
Moze problem lezy w tym ze jest to slider.

https://caniuse.com/#search=background-size
Na samym dole - Know Issues:

iOS Safari has buggy behavior with background-size: cover; + background-attachment: fixed;
iOS Safari has buggy behavior with background-size: cover; on a page’s body.

@krystian3w - dzięki, nie znałem narzędzia. Mam mieszane uczucia co do nich bo kiedyś gdy więcej pisałem frontu narzędzia tego typu były kiepskie. Tutaj jednak wygląda, że fajnie to jest już ogarnięte. Dobrze wiedzieć :slight_smile:.
Nie zmienia to faktu, że ss’y się przydały bo nie zamierzałem się rejestrować.

1lajk

Dziękuje za pomoc, ale jezeli safari nie rozumie parametru rozmiaru to czym go zastąpic…

Z tego wynika że nie powinienem stosowac praktycznie zadnych parametrow i zostawic obrazek sam sobie

Są stare metody na uzyskanie podobnego efektu. Gorzej będzie z fixed, ale myślę, że też da się to ogarnąć. Nie rezygnowałbym jednak z obecnych styli tylko dodał odpowiednie media queriues dla safari by to jakoś wyglądało.
Poszukaj w google, nie wierze, że na całym świecie tylko Ty napotkałeś problem z safari :slight_smile:. Na pewno są gotowe przykładowe rozwiązania i obejścia tego problemu właśnie na iOS’a.

PS. Może trzeba będzie dodać mały kawałek kodu dla Safari, ale to też nie problem.

1lajk

Albo wywalić bg… lub, nadać bg tabeli, a tabele zamiast obrazka, jak myślisz ?

Nie bardzo wiem co masz na myśli, ale skoro chcesz coś zrobić w tabeli to od razu uważam, że to kiepski pomysł :stuck_out_tongue:. Da się to ogarnąć za pomocą CSS bez modyfikacji HTML.

EDIT:
Rezygnowanie z jakiegoś elementu strony tylko ze względu na jakieś trudności też jest moim zdaniem kiepskim pomysłem.

Udało się wywalczyć coś :slight_smile:

W skrócie, Jak damy każdej możliwej innej przeglądarce pudełko i obraz większy niż ono same, to pomyśli i złoży go tak żeby pasował do pudełka.

Niestety Safari takie zmyślne nie jest i trzeba było dodać

    @media (max-width: 767px) {
   .bd-imagelink-2 {
    width: 100vw;
    height: 100vh;
    left: 4%;

Zerknąłem na szybko w kod i coś mi nie pasuje, dalej masz grafikę jako background, ale dodatkowo wyświetlasz ją jako img. Powinieneś też zastosować konkretne style tylko dla safari, a dla reszty przeglądarek zostawić bg-cover.

1lajk