Lượt xem trên thiết bị di động trở nên nhỏ hơn sau khi tải trang

Question

Tôi gặp sự cố nhỏ với một trong các trang web mà tôi đã phát triển. Vấn đề là yên tĩnh đơn giản, tuy nhiên các giải pháp có vẻ là một chút khó khăn hơn.

Vấn đề

Vấn đề là trang đã được trả lại như nó phải được trên một thiết bị di động lúc đầu, nhưng ngay sau khi pageload xong, trang thay đổi kích thước để phù hợp với khung nhìn. Không có gì lạ, điều này xảy ra ở hầu hết các trang web không đáp ứng. Nhưng điều kỳ lạ là chỉ có 75% chiều rộng có sẵn đang được sử dụng.

Tôi đã so sánh phiên bản dựa trên/cắt lát của thiết kế với phiên bản sản xuất. Phiên bản dựa trên không hiển thị khi cần (chiều rộng 100%). Tôi đã cố gắng để phát hiện sự khác biệt trong CSS, nhưng tôi chỉ có thể tìm thấy một cặp vợ chồng, tôi đã thử đặt lại những người, nhưng điều đó đã không làm việc.

Ngoài ra, tôi đã cố vô hiệu hóa javascript (chỉ có hiệu ứng Lightbox và 1 JqueryUI "AddClass"). Hiệu ứng javascript chỉ có 1 tác vụ: sau khi tải trang, tiêu đề sẽ được thay đổi kích thước từ 480px đến 220px chiều cao. Không có thay đổi nào được thực hiện đối với chiều rộng của bất kỳ phần tử nào trên trang.

Cuối cùng nhưng không kém phần quan trọng, tôi đã bắt đầu Adobe Edge Kiểm tra và xem qua trang nguồn của thiết bị di động. Nhưng tiếc là tôi không thể phát hiện bất kỳ phần tử nào trên trang vượt quá độ rộng của thẻ "body". Là người duy nhất vượt quá chiều rộng là hình ảnh tiêu đề, nhưng hình ảnh nằm trong một div (100% chiều rộng) với overflow:hidden

Dựa và phiên bản sản xuất

Nếu ai sẽ rất tử tế với xem xét điều gì làm rối loạn dựng hình, điều đó thật tuyệt vời. Tôi dường như không thể tìm ra nguyên nhân gây ra vấn đề.

Dựa (làm việc): http://www.nambi.nl/lefunq/ sản xuất (render ở 75% chiều rộng trên di động): http://www.lefunq.com/_index.php

Nhờ tất cả những ai có thời gian để xem xét vấn đề này.

Answer 1

Vấn đề của bạn là do mã facepile:

<div 
    class="fb-facepile" 
    data-href="http://www.facebook.com/pages/Le-Funq/113332665510819" 
    data-size="large" 
    data-max-rows="1" 
    data-width="450" 
></div> 

Thông tin thêm:

Ngay khi facepile không thể tải do đăng nhập không hợp lệ, trang bị thay đổi kích cỡ. Ngay sau khi tôi đăng nhập vào facebook và facepile được hiển thị, trang được kéo dài theo cách nó nên. Tôi chỉ phải tìm ra nguyên nhân gây ra sự co giãn lạ lùng, bởi vì nếu không có facepile, đó là 0x0 div/iframe, v.v.

Giải pháp:

Tôi đã thử một vài điều. Onload hoặc Onready sự kiện và ẩn hoặc loại bỏ mã facepile. Cuối cùng, cả hai tùy chọn này đều không hoạt động. Việc mở rộng quy mô xảy ra trước khi facepile được nạp hoàn toàn. Giải pháp cuối cùng là một workaround javascript, kiểm tra nếu có một thiết bị di động, nếu như vậy, sau đó vô hiệu hóa mã facepile:

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) == false) { 
    document.write('<fb:facepile href="http://www.facebook.com/pages/Le-Funq/113332665510819" size="large" max_rows="1" show_count="false" width="450" class="facepile"></fb:facepile>'); 
    } 

tôi tìm thấy con đường để phát hiện nếu trình duyệt là điện thoại di động trong câu trả lời này:

What is the best way to detect a mobile device in jQuery?

Answer 2

Tôi đã thử trình duyệt gốc, Firefox và Dolphin trên Android 2.3.7.

Cả hai trang hiển thị ở mức thu phóng 100% và thu phóng không thay đổi sau khi trang được tải hoàn toàn.

Tôi tin rằng sự cố này dành riêng cho phần mềm của thiết bị của bạn.