Mobile Safari trên iPhone/iPod CSS hack

Question

Có ai biết một bản hack CSS hiện đại hay không chỉ nhắm mục tiêu đến safari di động trên iPhone và iPod Touch?

Tôi tiếp tục thấy @media screen and (max-device-width: 480px), nhưng đó là từ 3 năm trước và khớp với Nexus S trong số những người khác ngay bây giờ.

(Điều này là để sửa chữa một vấn đề bố trí tinh tế. Tôi nhận ra trình duyệt sniffing là, vv ác)

Answer 1

http://cssuseragent.org và chào mừng bạn đến với Dark Side.

Answer 2

Bạn có thể sử dụng only screen and (-webkit-min-device-pixel-ratio: 2)

Answer 3

cách duy nhất để nhắm mục tiêu các thiết bị cụ thể trên web là để kiểm tra chuỗi tác nhân người dùng . Tất cả các thiết bị táo đều có tên của chúng trong chuỗi tác nhân người dùng. ví dụ. iphone sẽ có "iphone" và ipod sẽ có "ipod". Sử dụng tính năng này để tự động áp dụng hoặc tải css.

Answer 4

Bạn cũng có thể yêu cầu -webkit-min-device-pixel-ratio: 2. Tôi không tin rằng có các trình duyệt báo cáo bất kỳ cao hơn 2 tại thời điểm này (mặc dù một số báo cáo thấp hơn, do đó, sử dụng tỷ lệ tối thiểu) - tuy nhiên, điều này loại trừ các thiết bị iPhone 3GS và không võng mạc iPod Touch. Đối với những người, bạn sẽ phải làm một số người sử dụng đại lý sniffing.

Answer 5

Nếu bạn chỉ cần nhắm mục tiêu Safari trên điện thoại di động, chỉ cần thêm một truy vấn phương tiện truyền thông để hack này:

@media screen and (max-width: 767px) { 
    _::-webkit-full-page-media, _:future, :root .safari_only { 
     padding: 10px; //or any property you need 
    } 
} 

Và đừng quên thêm lớp .safari_only đến các yếu tố bạn muốn nhắm mục tiêu , ví dụ:

<div class='safari_only'> This div will have a padding:10px in a mobile with Safari </div> 

một chi tiết: đây là gonna cũng ảnh hưởng đến trình duyệt Safari trong các thiết bị Android nhưng ... dù sao người sử dụng Safari trong một thiết bị Android :)