Trình duyệt mặc định của Android tạo Thanh cuộn ngang cho thiết kế đáp ứng

Question

Trình duyệt mặc định của Android, hiển thị trang web của tôi rộng hơn và tạo thanh cuộn ngang.

Đây là ảnh chụp màn hình của vấn đề: (Chrome vs trình duyệt mặc định)

viewport của tôi là:

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Tôi nên làm gì?

Answer 1

Unfortunatelly, trình duyệt mặc định trên các thiết bị Android trước Lollipop, không có tính năng hỗ trợ cho CSS3 củacalc()chức năng. Giả sử đầu vào tìm kiếm của bạn có lớp .search-box và xem xét các ảnh chụp màn hình, CSS của bạn có thể chứa một cái gì đó tương tự như sau:

.search-box { 
    ... 
    width: calc(100% - 100px); 
    ... 
} 

... nơi 100px là chiều rộng của nút tìm kiếm của bạn.

Để khắc phục điều này, bạn cần phải thêm tiền tố tuyên bố trên bằng một trong những trình duyệt Android hiểu và có thể áp dụng:

.search-box { 
    ... 
    width: 75%; 
    width: calc(100% - 100px); 
    ... 
} 

Bây giờ, trình duyệt Android sẽ áp dụng width: 75% đến .search-box và sẽ bỏ qua calc() một cái không hỗ trợ và nút này sẽ được hiển thị trong số 25% còn lại. Tất nhiên, bạn có thể đặt nó thành bất kỳ giá trị thuận tiện nào khác, ngoài 75%. Lưu ý rằng chiều rộng màn hình rộng nhất trên các thiết bị trước Lollipop là 320px.

Lưu ý: lỗi của bạn calc() thực sự có thể áp dụng cho một số min-width, không phải là width. Vì bạn chưa cung cấp bất kỳ mã nào, đây là trợ giúp nhiều nhất có thể. Nhưng tôi theo ấn tượng là đủ rồi. Vấn đề calc() là một vấn đề phổ biến khi hỗ trợ trình duyệt mặc định trước Lollipop.

---

Từ đoạn video mà bạn liên kết trong các ý kiến, có vẻ như vấn đề của bạn không có gì để làm với việc trên, nhưng là do nội dung tràn từ .content_product_title_and_price_section.

Để khắc phục nó, bạn có thể thêm

@media(max-width: 379px){ 
    .content_product_title_and_price_section h3 { 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    } 
} 

... nhưng điều này sẽ ẩn các văn bản vượt quá tiêu đề sản phẩm lâu hơn. Nếu bạn không muốn điều đó xảy ra, bố cục thay thế cho điện thoại di động hẹp sẽ là thêm flex-wrap:wrap vào .content_product_title_and_price_section, cũng theo 379px. Đối với điều này, bạn có thể muốn điều chỉnh một chút bố cục của chú thích hình ảnh. Điều này có thể làm việc:

@media(max-width: 379px){ 
    .content_product_title_and_price_section { 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    } 
    .content_product_title_and_price_section h3 { 
    margin-bottom: -2rem; 
    } 
} 

tôi thêm margin-bottom vì vậy bạn không cần phải tự loại bỏ các   từ đánh dấu của bạn, nhưng tôi phải chỉ ra họ không cần phải có được có ở nơi đầu tiên. Bạn có thể dễ dàng thêm một phần đệm trái đơn giản vào giá của bạn <span> s.

---

Chúc mừng mã hóa! ::} < (((*>:.. :)

Answer 2

Tôi không có một trình duyệt Andriod để kiểm tra điều này, nhưng bạn có thể thử thiết lập một max-width cho div tìm kiếm, ví dụ:

#search-bar-mobile { 
    max-width: 70%; 
} 

này rất dễ dàng để làm và nếu nó giúp bạn có thể tinh chỉnh kích thước.

Chúc may mắn

Answer 3

Điều đầu tiên bạn muốn làm là thiết lập gỡ lỗi trên thiết bị di động trong Chrome và kết nối thiết bị Android của bạn. Google cung cấp hướng dẫn chi tiết về điều đó tại đây: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Khi bạn đã kết nối thiết bị, hãy mở thẻ devtools của bạn đến tab 'elements'. Cuộn đến khu vực thẻ 'body' nơi đánh dấu bản trình bày của bạn. Bây giờ chỉ cần nhấp chuột phải vào các yếu tố trong devtools DOM và xóa chúng cho đến khi thanh cuộn biến mất. Nó hoạt động tốt nhất để bắt đầu với các yếu tố chính như 'header-area' hoặc 'main-content-area'. Khi thanh cuộn biến mất, bạn biết phần tử bạn đã xóa hoặc phần tử con của phần tử đó là những gì đang phá vỡ bố cục của bạn.

Làm mới trang của bạn và xóa các yếu tố bên trong trang đã gây ra thanh cuộn. Bạn biết vấn đề là phần tử cha nếu thanh không biến mất khi tất cả các phần tử con bị xóa.

Khi bạn biết phần tử (hoặc phần tử nào) đang phá vỡ bố cục, bạn có thể điều chỉnh CSS trong công cụ tìm kiếm của bạn, sau đó thay đổi nguồn của bạn cho phù hợp.

Answer 4

Bạn có một vấn đề với display: flex; tài sản của bạn trên .content_product_title_and_price_section Bạn có thể tái tạo các hành vi chính xác trong firefox nếu bạn tắt tất cả các thiết lập display trừ display: -webkit-box; tôi sẽ loại bỏ này cũ -webkit-box và đi với -webkit-flex chỉ, hoặc cố gắng để đạt được tác dụng tương tự với display: inline-block trên h3 và nhịp và thêm một width: 75% đến h3 và vertical-align: top cho cả hai.