Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Problem ze skalowaniem na urzadzeniach mobilnych

Chcesz wiedzieć jak sterować wyglądem strony za pomocą styli? Tutaj dowiesz się jakie możliwości ma CSS i jak poprawnie go stosować, aby uzyskać zamierzone efekty. Dowiesz się jakie nowości udostępniono w CSS3 i jak z nich korzystać.

Problem ze skalowaniem na urzadzeniach mobilnych

Post 17.05.2017, 16:29:38

Poniżej zamieszczam kod, które generalnie zachowuje się zgodnie z oczekiwaniami.
Są 3 bloki o określonej procentowo szerokości. Wszystko jest super z wyjątkiem urządzeń mobilnych.
W momencie, gdy użytkownik zaczyna powiększać stronę zaczyna się ona rozpadać.
Głównym winowajcą wydaje się position:absolute; dla #fra3
Gdy ustawię na position:fixed to wszystko zachowuje się zgodnie z oczekiwaniami, problem w tym że nie jest znana długość tekst i powinna być możliwość jego przewijania.

Wartości są ustawione procentowo więc po powiększeniu dalej wszystko powinno być na swoim miejscu.

Z góry dzięki za wszelkie uwagi.

Kod: Zaznacz cały
<html>

   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width">

      <title>test</title>

      <style>
         html, body
         {
            height:100%;
            margin:0;
            padding:0;
         }
         #fra1, #fra2
         {
            position:fixed;
            top:0; left:0;
            width:30%; height:100%;
            background:#ebc015;
         }
         #fra2
         {
            left:30%;
            background:#0096e3;
         }
         #fra3
         {
            position:absolute;
            top:0; right:0;
            width:40%; height:auto;
            background:#ddd;
         }

         
      </style>

   </head>

<body>

   <div id="fra1"></div>
   <div id="fra2"></div>
   <div id="fra3">

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at tellus a velit eleifend euismod. Maecenas accumsan purus eu purus convallis elementum. Nunc accumsan ex sit amet maximus tincidunt. Vestibulum auctor justo vitae tellus feugiat commodo nec quis ex. Sed semper velit sit amet vehicula sagittis. Ut placerat lacus vitae nibh sagittis vehicula. Integer in orci tincidunt elit auctor dignissim. Nunc porta accumsan maximus. Donec dictum mattis enim vel hendrerit. Sed interdum, justo quis iaculis vehicula, elit neque dignissim nisl, et tempor sapien quam quis magna. Proin sed tellus pellentesque, malesuada est et, semper odio. Aliquam in imperdiet ipsum. Nulla nisl tellus, commodo at massa sit amet, interdum sodales magna. Phasellus ornare elit tincidunt eleifend rhoncus. Cras vel ligula nunc.Curabitur pellentesque purus ipsum. Aenean elit nunc, placerat sed interdum at, volutpat non felis. In hac habitasse platea dictumst. Nullam nec elit eu justo facilisis tempor a quis tellus. Suspendisse ultricies turpis lacus, vel eleifend nunc molestie at. Ut tempor accumsan orci id sollicitudin. Duis varius dolor neque, eget ultrices nisl ultrices id.Suspendisse sodales vel tortor nec mattis. Nam scelerisque bibendum fringilla. Nulla pellentesque ex massa, non vehicula neque accumsan in. Sed ornare quam non nisl pulvinar elementum. Etiam commodo eros tortor, ut pharetra urna viverra in. Vestibulum maximus massa quis eros posuere, vitae sagittis ante vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Vestibulum quis ex iaculis, fermentum arcu at, sollicitudin neque. Phasellus lacinia nunc magna, ut pulvinar elit luctus eu. Ut in nunc semper, suscipit purus eget, tempor eros.Maecenas venenatis ligula lorem, sit amet condimentum quam porta aliquam. Sed ultricies sollicitudin facilisis. Pellentesque aliquet neque sit amet nulla dignissim, id porta mauris efficitur. Etiam accumsan dictum nibh, a pellentesque ipsum dictum ut. Etiam congue neque mauris, eget consectetur orci molestie vel. Fusce dolor arcu, iaculis pharetra elit non, tincidunt malesuada enim. Ut pulvinar tempor semper.Nunc sed mi eu neque consequat laoreet ut et velit. Suspendisse feugiat felis nunc, ut ullamcorper sapien pharetra sed. In elit erat, aliquet vitae tempor nec, congue eu nunc. Nullam velit magna, lacinia id hendrerit eget, aliquet non quam. Fusce leo enim, ultricies vel nulla quis, bibendum semper ante. Donec in nunc est. Nam scelerisque, ex ut dictum pellentesque, justo erat bibendum ipsum, eget posuere eros ante at orci.
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at tellus a velit eleifend euismod. Maecenas accumsan purus eu purus convallis elementum. Nunc accumsan ex sit amet maximus tincidunt. Vestibulum auctor justo vitae tellus feugiat commodo nec quis ex. Sed semper velit sit amet vehicula sagittis. Ut placerat lacus vitae nibh sagittis vehicula. Integer in orci tincidunt elit auctor dignissim. Nunc porta accumsan maximus. Donec dictum mattis enim vel hendrerit. Sed interdum, justo quis iaculis vehicula, elit neque dignissim nisl, et tempor sapien quam quis magna. Proin sed tellus pellentesque, malesuada est et, semper odio. Aliquam in imperdiet ipsum. Nulla nisl tellus, commodo at massa sit amet, interdum sodales magna. Phasellus ornare elit tincidunt eleifend rhoncus. Cras vel ligula nunc.Curabitur pellentesque purus ipsum. Aenean elit nunc, placerat sed interdum at, volutpat non felis. In hac habitasse platea dictumst. Nullam nec elit eu justo facilisis tempor a quis tellus. Suspendisse ultricies turpis lacus, vel eleifend nunc molestie at. Ut tempor accumsan orci id sollicitudin. Duis varius dolor neque, eget ultrices nisl ultrices id.Suspendisse sodales vel tortor nec mattis. Nam scelerisque bibendum fringilla. Nulla pellentesque ex massa, non vehicula neque accumsan in. Sed ornare quam non nisl pulvinar elementum. Etiam commodo eros tortor, ut pharetra urna viverra in. Vestibulum maximus massa quis eros posuere, vitae sagittis ante vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Vestibulum quis ex iaculis, fermentum arcu at, sollicitudin neque. Phasellus lacinia nunc magna, ut pulvinar elit luctus eu. Ut in nunc semper, suscipit purus eget, tempor eros.Maecenas venenatis ligula lorem, sit amet condimentum quam porta aliquam. Sed ultricies sollicitudin facilisis. Pellentesque aliquet neque sit amet nulla dignissim, id porta mauris efficitur. Etiam accumsan dictum nibh, a pellentesque ipsum dictum ut. Etiam congue neque mauris, eget consectetur orci molestie vel. Fusce dolor arcu, iaculis pharetra elit non, tincidunt malesuada enim. Ut pulvinar tempor semper.Nunc sed mi eu neque consequat laoreet ut et velit. Suspendisse feugiat felis nunc, ut ullamcorper sapien pharetra sed. In elit erat, aliquet vitae tempor nec, congue eu nunc. Nullam velit magna, lacinia id hendrerit eget, aliquet non quam. Fusce leo enim, ultricies vel nulla quis, bibendum semper ante. Donec in nunc est. Nam scelerisque, ex ut dictum pellentesque, justo erat bibendum ipsum, eget posuere eros ante at orci.
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at tellus a velit eleifend euismod. Maecenas accumsan purus eu purus convallis elementum. Nunc accumsan ex sit amet maximus tincidunt. Vestibulum auctor justo vitae tellus feugiat commodo nec quis ex. Sed semper velit sit amet vehicula sagittis. Ut placerat lacus vitae nibh sagittis vehicula. Integer in orci tincidunt elit auctor dignissim. Nunc porta accumsan maximus. Donec dictum mattis enim vel hendrerit. Sed interdum, justo quis iaculis vehicula, elit neque dignissim nisl, et tempor sapien quam quis magna. Proin sed tellus pellentesque, malesuada est et, semper odio. Aliquam in imperdiet ipsum. Nulla nisl tellus, commodo at massa sit amet, interdum sodales magna. Phasellus ornare elit tincidunt eleifend rhoncus. Cras vel ligula nunc.Curabitur pellentesque purus ipsum. Aenean elit nunc, placerat sed interdum at, volutpat non felis. In hac habitasse platea dictumst. Nullam nec elit eu justo facilisis tempor a quis tellus. Suspendisse ultricies turpis lacus, vel eleifend nunc molestie at. Ut tempor accumsan orci id sollicitudin. Duis varius dolor neque, eget ultrices nisl ultrices id.Suspendisse sodales vel tortor nec mattis. Nam scelerisque bibendum fringilla. Nulla pellentesque ex massa, non vehicula neque accumsan in. Sed ornare quam non nisl pulvinar elementum. Etiam commodo eros tortor, ut pharetra urna viverra in. Vestibulum maximus massa quis eros posuere, vitae sagittis ante vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Vestibulum quis ex iaculis, fermentum arcu at, sollicitudin neque. Phasellus lacinia nunc magna, ut pulvinar elit luctus eu. Ut in nunc semper, suscipit purus eget, tempor eros.Maecenas venenatis ligula lorem, sit amet condimentum quam porta aliquam. Sed ultricies sollicitudin facilisis. Pellentesque aliquet neque sit amet nulla dignissim, id porta mauris efficitur. Etiam accumsan dictum nibh, a pellentesque ipsum dictum ut. Etiam congue neque mauris, eget consectetur orci molestie vel. Fusce dolor arcu, iaculis pharetra elit non, tincidunt malesuada enim. Ut pulvinar tempor semper.Nunc sed mi eu neque consequat laoreet ut et velit. Suspendisse feugiat felis nunc, ut ullamcorper sapien pharetra sed. In elit erat, aliquet vitae tempor nec, congue eu nunc. Nullam velit magna, lacinia id hendrerit eget, aliquet non quam. Fusce leo enim, ultricies vel nulla quis, bibendum semper ante. Donec in nunc est. Nam scelerisque, ex ut dictum pellentesque, justo erat bibendum ipsum, eget posuere eros ante at orci.


   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at tellus a velit eleifend euismod. Maecenas accumsan purus eu purus convallis elementum. Nunc accumsan ex sit amet maximus tincidunt. Vestibulum auctor justo vitae tellus feugiat commodo nec quis ex. Sed semper velit sit amet vehicula sagittis. Ut placerat lacus vitae nibh sagittis vehicula. Integer in orci tincidunt elit auctor dignissim. Nunc porta accumsan maximus. Donec dictum mattis enim vel hendrerit. Sed interdum, justo quis iaculis vehicula, elit neque dignissim nisl, et tempor sapien quam quis magna. Proin sed tellus pellentesque, malesuada est et, semper odio. Aliquam in imperdiet ipsum. Nulla nisl tellus, commodo at massa sit amet, interdum sodales magna. Phasellus ornare elit tincidunt eleifend rhoncus. Cras vel ligula nunc.

   Curabitur pellentesque purus ipsum. Aenean elit nunc, placerat sed interdum at, volutpat non felis. In hac habitasse platea dictumst. Nullam nec elit eu justo facilisis tempor a quis tellus. Suspendisse ultricies turpis lacus, vel eleifend nunc molestie at. Ut tempor accumsan orci id sollicitudin. Duis varius dolor neque, eget ultrices nisl ultrices id.

   Suspendisse sodales vel tortor nec mattis. Nam scelerisque bibendum fringilla. Nulla pellentesque ex massa, non vehicula neque accumsan in. Sed ornare quam non nisl pulvinar elementum. Etiam commodo eros tortor, ut pharetra urna viverra in. Vestibulum maximus massa quis eros posuere, vitae sagittis ante vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Vestibulum quis ex iaculis, fermentum arcu at, sollicitudin neque. Phasellus lacinia nunc magna, ut pulvinar elit luctus eu. Ut in nunc semper, suscipit purus eget, tempor eros.

   Maecenas venenatis ligula lorem, sit amet condimentum quam porta aliquam. Sed ultricies sollicitudin facilisis. Pellentesque aliquet neque sit amet nulla dignissim, id porta mauris efficitur. Etiam accumsan dictum nibh, a pellentesque ipsum dictum ut. Etiam congue neque mauris, eget consectetur orci molestie vel. Fusce dolor arcu, iaculis pharetra elit non, tincidunt malesuada enim. Ut pulvinar tempor semper.

   Nunc sed mi eu neque consequat laoreet ut et velit. Suspendisse feugiat felis nunc, ut ullamcorper sapien pharetra sed. In elit erat, aliquet vitae tempor nec, congue eu nunc. Nullam velit magna, lacinia id hendrerit eget, aliquet non quam. Fusce leo enim, ultricies vel nulla quis, bibendum semper ante. Donec in nunc est. Nam scelerisque, ex ut dictum pellentesque, justo erat bibendum ipsum, eget posuere eros ante at orci.

   </div>

</body>
</html>
gesar
Posty: 5
Dołączył(a): 17.05.2017

Powrót do CSS


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 5 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 50331 zarejestrowanych użytkowników.
Najnowszy użytkownik: AgencjaCopywriterska


Nasi użytkownicy napisali:

  • 935474 wiadomości
  • w 246488 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)