Tôi cần xem các trang web của mình trông như thế nào trên iPhone và iPad trên màn hình Windows của mình. Điều này có khả thi không?
Một tìm kiếm nhanh chóng cho ra một số trang web thử nghiệm iPhone, có vẻ như những gì tôi muốn. Tuy nhiên, chúng hoàn toàn không chính xác khi tôi so sánh với iPhone của chính mình! Tôi thực sự cần một cái gì đó càng gần chính xác 100% càng tốt.
XCode có trình mô phỏng chính xác 100% không? Tôi hiểu rằng tôi cần một máy Mac để chạy XCode ...
Câu trả lời:
Trình mô phỏng iPhone / iPad đi kèm với Xcode bao gồm Safari. Nếu bạn chạy Safari trong trình mô phỏng, bạn có thể xem trang web của mình và trang web sẽ xuất hiện giống như trên thiết bị thực. Điều này có thể hoạt động để kiểm tra bố cục chung. Nhưng vì nó là một trình mô phỏng nên có thể không phải mọi chức năng đều giống hệt như sử dụng thiết bị iOS thực.
Nếu bạn đang viết một trang web và bạn cần xác minh rằng nó trông phù hợp trên một thiết bị nhất định, thì bạn cần kiểm tra trang web của mình trên thiết bị thực tế đó. Thử nghiệm với phần cứng thực là một phần của giá của việc kinh doanh.
Và có, bạn cần một máy Mac để chạy Xcode.
Cả Chrome và Firefox hiện đều có trình giả lập tích hợp sẵn. Chúng không hoàn hảo nhưng đủ tốt để có thể giúp bạn thực hiện hầu hết mọi cách trước khi thử nghiệm trên một thiết bị thực tế. Phần tốt nhất là nếu bạn thích các công cụ dành cho nhà phát triển của trình duyệt ( Chrome , Firefox ), bạn có thể sử dụng chúng trong khi mô phỏng.
Để tải trình giả lập: [Ctrl + Shift + M] và chọn thiết bị bạn muốn giả lập. Bạn có thể phải làm mới trang, đặc biệt là nếu bạn có bất kỳ thứ gì phụ thuộc vào tập lệnh thực thi khi tải trang.
Internet Explorer cũng có một chế độ giả lập thiết bị. F12, sau đó CTRL + 8. Nó không hoàn toàn giống như mô phỏng Thiết bị di động Chrome, nhưng cho phép bạn mô phỏng vị trí địa lý:
EDIT 2020: Hầu hết chúng về cơ bản chỉ để kiểm tra độ phân giải, một số trong số chúng thậm chí đã lỗi thời, đáng buồn thay, sự phát triển của trình duyệt di động đã đi ngang với máy tính để bàn (đặc biệt là ở Apple), do đó người ta không thể thực sự "mô phỏng" một chiếc điện thoại thực với những được đề cập với bình luận.
Để mô phỏng điện thoại thực, thường lựa chọn tốt nhất là tải xuống một ứng dụng dành cho máy tính để bàn, đối với Windows, thường là trả phí / miễn phí, trên Mac chỉ cần sử dụng một Xcode (nhưng tôi nghi ngờ mọi người Mac đang tìm kiếm Q / A này).
Freemium trực tuyến dễ sử dụng mà tôi đã tìm thấy gần đây là Appetize.io, nó có vẻ thực sự hiển thị màn hình theo mạng, nhưng thành thật mà nói, tôi không thực sự tìm hiểu xem nó cũng có các tính năng giống hệt nhau và thiếu các tính năng như iOS thực hay không.
Trình mô phỏng tốt - không giống như thay đổi kích thước cửa sổ trình duyệt thành kích thước điện thoại di động - hoạt động giống như điện thoại thông minh. Đừng nhầm lẫn rằng bạn không thể chỉnh sửa thanh địa chỉ trong safari - chỉ cần mở công cụ deveolper (thường là F12) và viết lại URL nguồn của iframe thành của bạn.
Liên kết: http://recombu.com/mobile/interactive/ios7-demo/
Có vẻ hoạt động giống như recombu, nhưng bạn có thể mở url trực tiếp bằng cách nhập văn bản và bạn có thể phóng to / thu nhỏ.
Liên kết: http://www.responsimulator.com/
Điều này dường như xử lý trang web, nhưng nó mô phỏng iPhone cũ - đôi khi vẫn tiện dụng.
Liên kết: http://transmog.net/iphone-simulator/mobile-web-browser-emulator.php
Luôn sử dụng google (hoặc các trình tìm kiếm trên internet khác) để kiểm tra các trình mô phỏng / giả lập khác và các phiên bản mới.
Liên kết với google tìm kiếm ví dụ cho cái này:
https://www.google.cz/search?q=online+iphone+emulator
Nếu bạn mở công cụ của nhà phát triển trình duyệt của mình (trong Chrome F12), có thể sẽ có tùy chọn để chuyển đổi chế độ thiết bị (trong Chrome, đó là biểu tượng điện thoại thông minh nhỏ ở trên cùng bên trái).
Sau khi chọn tùy chọn này, GUI sẽ thay đổi và sẽ cung cấp tùy chọn để chọn thiết bị để mô phỏng (trong Chrome, nó nằm ở trên cùng - chọn tùy chọn "Thiết bị"), sau khi chọn thiết bị, việc làm mới trang thường được khuyến nghị để đảm bảo độ chính xác của trình mô phỏng.
Hiện tại, tôi nghĩ trình giả lập tốt nhất là https://app.crossbrowsertesting.com
Nó có kích thước thực và bàn phím ảo (đó là điều quan trọng nhất), phóng to sự kiện ...
Ngoài ra https://appetize.io/demo có những thứ tương tự nhưng nó có giới hạn thời gian.
Bạn có thể chạy safari trong trình mô phỏng của Xcode và nó sẽ mô phỏng chính xác iPad và iPhone. Một thứ khác trên thị trường mà tôi đã nghe được đánh giá tốt là Ripple cho chrome .
Không có gì thay thế tốt cho việc thử nghiệm trên một thiết bị thực tế.
Các thiết bị thực có mật độ hiển thị cao hơn, nghĩa là các pixel nhỏ hơn. Nếu không kiểm tra trên thiết bị thực, bạn có thể không nhận ra rằng thiết kế của mình bao gồm văn bản quá nhỏ để đọc hoặc các nút quá nhỏ để nhấn.
Bạn sử dụng thiết bị thực bằng ngón tay, không phải chuột. Điều này có nghĩa là độ chính xác của các lần nhấn thấp hơn nhiều và những gì bạn đang nhấn bị che khuất bởi ngón tay của bạn. Nếu không thử nghiệm trên thiết bị thực, bạn có thể không nhận ra mình đã đưa các vấn đề về khả năng sử dụng vào thiết kế của mình.
XCode đi kèm với một trình mô phỏng cho iPad và iPhone.
Bạn cũng có thể sử dụng Safari trên OS X để gỡ lỗi các trang web trên thiết bị iOS của mình.
Bạn có thể sử dụng trình giả lập Ripple trên Chrome.
Tôi sử dụng trình cắm chrome giả lập trình duyệt di động có các loại thiết bị iphone. Nó thực sự sử dụng tác nhân người dùng và kích thước của thiết bị mà các trang đáp ứng dựa trên đó được hiển thị