Danh sách sự khác biệt đã biết giữa "Safari trên iPad" và "Safari trên iPhone"

Question

Trang web của tôi trông hoàn hảo trên iPhone nhưng trông cực tiểu trên iPad. Tôi gặp rất nhiều khó khăn trong việc tìm kiếm thông tin về sự khác biệt giữa bộ công cụ kết xuất webkit/safari của iPad và công cụ hiển thị webkit/safari của iPhones.

Nếu bạn không tin tôi, hãy truy cập http://www.finishline.com trên cả iPhone và iPad (lưu ý rằng bạn sẽ phải nhấp vào "trang web chuẩn" ở cuối trang nếu bạn bị đưa đến trang web dành cho thiết bị di động) . Sự khác biệt chính là một nền trắng bị thiếu và menu điều hướng theo thẻ chính ở trên cùng (cũng là chiếc giỏ nhỏ nhỏ ở trên cùng bên phải là cách tắt).

iPhone (có vẻ đúng):

iPad (trông sai):

sự khác biệt về hiển thị giữa webkit di động trên iPhone và iPad là gì?

Answer 1

iPhone và iPad sử dụng cùng một công cụ kết xuất, WebKit.

Sự khác biệt rõ ràng duy nhất giữa những nền tảng có thể là:

• Nếu cỡ chữ trên trang web được quy định tại điểm ảnh, đếm DPI cao hơn màn hình hiển thị võng mạc của thể có một số ảnh hưởng đến tỉ lệ văn bản, nhưng tôi có thể sai . Luôn chỉ định kích thước phông chữ theo điểm.
• Kích thước màn hình của cả hai thiết bị đều khác nhau. Không phải về pixel, nhưng về kích thước vật lý. Đây là một cái gì đó WebKit (hoặc iOS nói chung) cố gắng bù đắp bằng cách thay đổi kích thước phông chữ để làm cho chúng có thể đọc được trong khi vẫn còn phù hợp trên trang. Điều này có thể dẫn đến việc tái tài liệu; gây ra ngắt dòng.

Trong trường hợp này, tôi không thể đề xuất bất kỳ điều gì khác ngoài việc kiểm tra bố cục trang của bạn. Xác thực nó bằng cách sử dụng các công cụ của W3C và kiểm tra nó một cách chính xác trong cả Simulator và quan trọng hơn, trên các thiết bị.

Từ những gì nó nhìn ở trên, một số lỗ hổng CSS (để làm cho nó hoạt động trên IE chẳng hạn) có thể có tác dụng như thế này. Hoặc ngắt dòng.

Nói chung, bạn không nên lo lắng về sự khác biệt giữa hai nền tảng này hoặc nền tảng nói chung. Sử dụng CSS và HTML sạch và kiểm tra nó trên tất cả các thiết bị đích cho đến khi nó có vẻ đúng. Cố gắng tránh sử dụng các hacks CSS/HTML để làm cho IE6 hoạt động. Đây là một trong những nguyên nhân gốc rễ của các vấn đề từ kinh nghiệm của tôi. Theo tôi biết, không có sự khác biệt "lớn" giữa các thiết bị này, ngoại trừ kích thước màn hình (và có thể là phiên bản WebKit/iOS đã sử dụng - giả sử iOS 3.x và iOS 4.2).

Nếu bạn có quyền truy cập Xcode, hãy thử xem trang web từ các phiên bản iOS khác nhau để xem đó có phải là sự cố hay không.

Trong cả hai trường hợp. Sửa HTML và CSS của bạn. Vấn đề có thể có một nguyên nhân rất đơn giản.

Answer 2

iPad của bạn có thể đang chạy iOS 3.2 (hoặc beta 4.2) trong khi iPhone của bạn đang chạy ít nhất iOS 4.0. Đó là quan trọng hơn sự khác biệt giữa các nền tảng (trong đó không có nghĩa vụ phải được bất kỳ).

Tôi nghĩ bạn đang sủa nhầm cây yêu cầu danh sách sự khác biệt - bạn có thể truy cập http://trac.webkit.org/ và nhận danh sách đầy đủ các bản vá và sửa lỗi giữa hai phiên bản, nhưng sẽ nhanh hơn khi sử dụng kỹ thuật khắc phục sự cố CSS thông thường (nghĩa là chủ yếu là dùng thử và lỗi) để tìm hiểu xem trang web của bạn đang gây ra điều gì gây rối trong iOS 3.2.