của Apple mới Macbook Pro có một màn hình 15" với độ phân giải 2880x1800. Hiện nay nó được mở rộng quy mô trang web dẫn đến hình ảnh pixel gấp đôi và một bố cục mà dường như tăng gấp đôi quy mô quá.Chuyển đổi trang web cho màn hình Retina độ phân giải
Như một nhà phát triển web làm thế nào để đi về chuyển đổi PHP/XHTML/CSS trang web hiện tại của tôi để tận dụng lợi thế của màn hình-DPI cao
trang sau cung cấp một chạy qua phong nha:
http://www.webmonkey.com/2012/06/make-sure-your-site-looks-good-on-the-new-retina-macbook-pro/
Biểu tượng phông chữ cung cấp một giải pháp, và các loại @media cho phép phong cách bổ sung để được sử dụng:
Ví dụ:
@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.logo {
background: url(/path/to/my/highreslogo.png) no-repeat;
background-size: 100px 100px;
/* rest of your styles... */
}
}
Chỉ cần thực hiện một trang web retina thân thiện, sử dụng truy vấn phương tiện trên (tương tự) và nó đã làm việc – DBUK
Có lẽ giải pháp cho một võng mạc iPhone/iPad sẽ làm việc trên võng mạc Mac. Cho biết hình ảnh có độ phân giải cao hơn như:
background-image: url([email protected]);
Stackexchange không phải là trang web được thiết kế để đoán câu trả lời –
@ChrisBeach Bạn hỏi một questio n, và sau đó bắn hạ một giải pháp có thể bởi vì bởi vì tôi nói "có lẽ"? – Connor
@NoahWitherspoon Tại sao nó không hoạt động? Câu trả lời của DBUK về cơ bản là đề xuất cùng một giải pháp, nhưng câu trả lời của tôi là -2 ... – Connor
Tập lệnh này có thể giúp - http://retinajs.com/. Bạn thêm @ 2x vào tên hình ảnh của bạn được cắt để hiển thị võng mạc và tập lệnh thực hiện phần còn lại. Một lỗ hổng khi cắt hình ảnh là mọi thứ phải chia hết cho hai - mà bạn đã biết, nhưng điều này vấp tôi khi tôi tạo các nút của mình một cách hoàn hảo nhưng bỏ qua bóng/đường kẻ 1px xung quanh, doh! :(
Chỉnh sửa: Chỉ cần đi qua một bài viết thật sự tốt đẹp/hướng dẫn về đề tài này:.
http://benfrain.com/how-to-serve-high-resolution-website-images-for-retina-displays-new-ipadiphone4/
Bạn có thể kết thúc làm cho mọi thứ quá nhỏ đến nỗi những người không có tầm nhìn hoàn hảo có thể gặp khó khăn –
My Mục đích isn Để làm cho mọi thứ nhỏ hơn, tôi muốn tăng gấp đôi độ phân giải của mình trong khi vẫn giữ nguyên kích thước vật lý Như Apple đã thực hiện trên trang web của họ khi xem ở độ phân giải Retina –