Masalah Scroll Bar Horizontal dengan pertanyaan media

Saya bermain-main dengan pertanyaan media dan mulai mengembangkan untuk layar seluler. Saya memiliki halaman pertama sesuai keinginan saya, tetapi saya mendapatkan bilah gulir horizontal di bagian bawah ketika saya mengubah ukuran layar menjadi ‹480 piksel. Saya belum mengujinya pada perangkat seluler, tetapi saya berasumsi kesalahan yang sama akan muncul.

Situsnya adalah: http://brad.sebdengroup.com/newOdynSite/index.php

Untuk membuat ulang kesalahan, buka situs, ubah ukuran jendela menjadi ‹480 piksel dan gulir secara vertikal ke bawah


html css scrollbar media-queries
person Andy    schedule 08.08.2012    source sumber
comment
Bagi saya, ukuran ponsel terlihat bagus di Chrome.   -  person SpaceBeers    schedule 08.08.2012
comment
Gulir ke bawah, apakah bilah gulir horizontal tidak muncul?   -  person Andy    schedule 08.08.2012

Jawaban (2)


arrow_upward
1
arrow_downward

Inilah masalahnya:

#main span.bold {
    padding: 15px 20px;
    ...
}
#main span{
    width: 100%;
    ...
}

Kombinasi aturan CSS ini menciptakan elemen yang lebih besar dari lebar halaman. Lebar 100% tidak termasuk spasi yang digunakan oleh padding, border, atau margin. Misalnya, jika lebar halaman adalah 480px, lebar elemennya adalah 20px + 480px + 20px = 520px.

Untuk menghindari hal ini, coba gabungkan konten dalam tag tambahan, sehingga lebar dan padding dapat diterapkan ke elemen terpisah, dan sesuaikan CSS sesuai kebutuhan. Misalnya:

<span><strong>What have we done?</strong></span>
person Matt Coughlin    schedule 08.08.2012
comment
Saya mencoba melakukan ini tanpa menyentuh html saya jadi harus memeriksanya lebih jauh, tetapi Anda tepat dengan lebar bentang + bantalan yang menyebabkannya. Bersulang - person Andy; 08.08.2012

arrow_upward
0
arrow_downward

Anda dapat mencoba menggunakan overflow-x:hidden; pada ‹body› untuk sekadar menyembunyikan bilah gulir. Namun, Anda tidak akan dapat dengan mudah melihat konten di luar port tampilan.

Untuk perangkat seluler Anda dapat menggunakan kueri media untuk menentukan style sheet:

<link rel="stylesheet" href="/idstyles/mobile.css" media="only screen and (max-device-width: 480px)">

Atau Anda dapat menggunakan elemen ‹meta›:

<meta name="viewport" content="width=device-width, user-scalable=no">

person Gabriel    schedule 08.08.2012