2017-12-04 30 views
11

Chúng tôi có một trang web hiển thị tốt trên tất cả các trình duyệt và thiết bị, ngoại trừ lần đầu tiên bạn mở nó trong Safari di động (hoặc Safari Mac trên màn hình hẹp).iOS Safari không hiển thị trang đầy đủ từ lần đầu tiên

Website: http://sheriff.org/

sinh sản trên iPhone Safari:

  1. mở trang web trong chế độ riêng
  2. Làm mới trang

sinh sản trên Safari cho Mac:

  1. Mở Safari ở chế độ riêng
  2. Chuyển User Agent cho iOS - iPhone (Phát triển> User Agent> Safari - iOS - iPhone)
  3. Thay đổi kích thước trình duyệt để có một xấp xỉ chiều rộng thiết bị di động
  4. mở trang web
  5. Refresh trang

dự kiến: trang nên làm cho giống đầu tiên và lần thứ hai

sheriff.org after refresh

Thực tế: Đây là lần đầu tiên trong chế độ tư nhân, chỉ một hộp màu xanh lá cây có thể nhìn thấy Lần thứ hai, trang render hoàn toàn

sheriff.org in safari first time in private mode

phát hiện : Tôi đã cố gắng so sánh cả hai trang (khi nó hiển thị chính xác và khi hiển thị bị hỏng), để xem liệu lại là bất kỳ sự khác biệt nào, để tìm hiểu rằng trong cả hai trường hợp, trang có cùng một HTML & CSS chính xác.

Nếu bạn kiểm tra bất kỳ phần tử nào không được hiển thị trong lần thử đầu tiên, bạn sẽ không tìm thấy bất kỳ kiểu nào ảnh hưởng đến khả năng hiển thị của phần tử (như opacity, display, visibility , position ... vv)

UPDATE: dường như đã xảy ra lỗi trong Safari điều khiển Unhandled Promise Rejection: [object DOMError] mà có thể gây ra vấn đề này, tôi đã làm một nghiên cứu và phát hiện ra rằng nó có thể được gây ra bởi ô tô hiển thị video trên trang (trang không có video nhưng video phát ngay cả khi lỗi này được ném), vì vậy tôi tin rằng có một lý do khác khiến lỗi này bị ném

Bất kỳ lời khuyên nào về lý do chúng tôi thấy hành vi như vậy trên Safari được đánh giá cao.

+0

Hello there tôi có thể tái tạo trên điện thoại của tôi, nhưng không phải trên một cuộc thám hiểm iPhone mô phỏng trên Mac OS Sierra 10,12 - nó có thể là một điều iOS 11, tuy nhiên .. rất nhiều điều đang xảy ra ở đây, tôi là ge tting 6 js lỗi - không tốt chút nào:/ – scooterlord

+0

lỗi js không nên ảnh hưởng, chúng sẽ xuất hiện trong cả hai trường hợp, khi sự cố được sao chép và khi nó không được tốt. –

+0

Lỗi, có lẽ hầu hết là liên quan đến js, vì vậy có lẽ bạn cũng nên xem xét nó. Nó có thể được gây ra bởi một số loại một thời gian chờ hoặc kích hoạt một phần tử DOM chưa được tải - trong khi ở lần thứ hai, tập tin được lưu trữ để nó tải. – scooterlord

Trả lời

0

Trang web của bạn vô cùng rắc rối và một số vấn đề khác là do kích thước lớn của trang chủ vô lý khiến một số nội dung trang web không được tải khi bạn muốn được tải như một số tập lệnh bên ngoài lớn đang tải trước css của bạn. Lý do css trong câu hỏi tải trên "thứ hai" thử, là vì css được lưu trữ ... cuối cùng (sau khi tải một trong vài chục javascripts bạn yêu cầu PRIOR đến một trong vài chục tệp css bạn yêu cầu). ..và sẽ triển khai đúng css trên các lần tải tiếp theo (miễn là bạn thực sự cho phép đủ thời gian và băng thông để tải trang lần đầu tiên).

tôi muốn cung cấp cho bạn rất nhiều lời khuyên off the bat, nhưng trong việc giữ liên quan đến bài viết của bạn:

  1. Hãy chắc chắn rằng css của bạn được gọi TRƯỚC bất kỳ javascripts của bạn vào đầu trang của bạn (s) .
  2. Cân nhắc loại bỏ khoảng 90% tập lệnh không cần thiết để trang web của bạn hữu ích ... vì rất ít người sẽ có đủ kiên nhẫn để tải nhiều dữ liệu này trước khi duyệt trang web của bạn ... đặc biệt trên các trình duyệt di động tương đối chậm.
  3. Xem tất cả các lỗi trong bảng điều khiển của Chrome (nhấp chuột phải vào trang của bạn trong Google Chrome và nhấn "kiểm tra", sau đó xem tab "bảng điều khiển" ... trang web của bạn có nhiều lỗi. bạn muốn trang web của bạn để tiêu chuẩn tuân thủ và nhiều khả năng được thu thập bởi công cụ tìm kiếm
  4. Hãy nhìn vào trang web của bạn trên YouTube Insight trang của Google:.!. https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.sheriff.org%2FPages%2FHome.aspx

Chúc may mắn

+0

Để biết thêm thông tin về lý do tại sao và có đặt liên kết css trước liên kết tập lệnh hay không, có một vài câu trả lời tuyệt vời tại đây: https://stackoverflow.com/questions/9271276/is-the-recommendation-to-include-css- trước-javascript-không hợp lệ – Doomd

Các vấn đề liên quan