Sự khác biệt giữa chiều rộng thiết bị tối đa và chiều rộng tối đa cho web di động là gì?

Tôi cần phát triển một số trang html cho điện thoại iphone / android, nhưng sự khác biệt giữa max-device-widthvà là max-widthgì? Tôi cần sử dụng css khác nhau cho kích thước màn hình khác nhau.

@media all and (max-device-width: 400px)

@media all and (max-width: 400px)

Có gì khác biệt?

max-width là chiều rộng của khu vực hiển thị mục tiêu, ví dụ: trình duyệt

max-device-width là chiều rộng của toàn bộ khu vực kết xuất của thiết bị, tức là màn hình thiết bị thực tế

Cùng đi max-heightvà max-device-heighttự nhiên.

max-widthđề cập đến chiều rộng của khung nhìn và có thể được sử dụng để nhắm mục tiêu kích thước hoặc hướng cụ thể kết hợp với max-height. Sử dụng nhiều điều kiện max-width(hoặc min-width), bạn có thể thay đổi kiểu trang khi trình duyệt được thay đổi kích thước hoặc hướng thay đổi trên thiết bị như iPhone.

max-device-widthđề cập đến kích thước khung nhìn của thiết bị bất kể định hướng, tỷ lệ hiện tại hoặc thay đổi kích thước. Điều này sẽ không thay đổi trên thiết bị nên không thể được sử dụng để chuyển đổi biểu định kiểu hoặc chỉ thị CSS khi màn hình được xoay hoặc thay đổi kích thước.

Bạn nghĩ gì về việc sử dụng phong cách này?

Đối với tất cả các điểm dừng chủ yếu dành cho "thiết bị di động" tôi sử dụng min(max)-device-widthvà cho các điểm dừng chủ yếu dành cho sử dụng "máy tính để bàn" min(max)-width.

Có rất nhiều "thiết bị di động" tính toán chiều rộng kém.

Hãy xem http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml :

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}

max-chiều rộng thiết bị là chiều rộng kết xuất thiết bị

@media all and (max-device-width: 400px) {
    /* styles for devices with a maximum width of 400px and less
       Changes only on device orientation */
}

@media all and (max-width: 400px) {
    /* styles for target area with a maximum width of 400px and less
       Changes on device orientation , browser resize */
}

Độ rộng tối đa là chiều rộng của vùng hiển thị mục tiêu có nghĩa là kích thước hiện tại của trình duyệt.

sự khác biệt là chiều rộng tối đa của thiết bị là tất cả chiều rộng và chiều rộng tối đa của màn hình có nghĩa là không gian được trình duyệt sử dụng để hiển thị các trang. Nhưng một sự khác biệt quan trọng khác là sự hỗ trợ của các trình duyệt Android, trên thực tế nếu bạn sẽ sử dụng độ rộng tối đa của thiết bị thì điều này sẽ chỉ hoạt động trong Opera, thay vào đó tôi chắc chắn rằng độ rộng tối đa sẽ hoạt động cho mọi loại trình duyệt di động ( Tôi đã thử nghiệm nó trong Chrome, firefox và opera cho ANDROID).

max-width là chiều rộng của vùng hiển thị mục tiêu, ví dụ: trình duyệt; chiều rộng tối đa của thiết bị là chiều rộng của toàn bộ khu vực kết xuất của thiết bị, tức là màn hình thiết bị thực tế.

• Nếu bạn đang sử dụng độ rộng tối đa của thiết bị , khi bạn thay đổi kích thước cửa sổ trình duyệt trên màn hình của mình, kiểu CSS sẽ không thay đổi thành cài đặt truy vấn phương tiện khác;

• Nếu bạn đang sử dụng độ rộng tối đa , khi bạn thay đổi kích thước trình duyệt trên máy tính để bàn của mình, CSS sẽ thay đổi thành cài đặt truy vấn phương tiện khác và bạn có thể được hiển thị với kiểu dáng cho điện thoại di động, chẳng hạn như các menu thân thiện với cảm ứng.

Nếu bạn đang tạo một ứng dụng đa nền tảng (ví dụ: sử dụng phonegap / cordova) thì,

Không sử dụng chiều rộng thiết bị hoặc chiều cao thiết bị. Thay vì sử dụng chiều rộng hoặc chiều cao trong các truy vấn phương tiện CSS vì thiết bị Android sẽ gặp sự cố về chiều rộng thiết bị hoặc chiều cao thiết bị. Đối với iOS nó hoạt động tốt. Chỉ các thiết bị Android không hỗ trợ chiều rộng thiết bị / chiều cao thiết bị.

Không sử dụng chiều rộng / chiều cao thiết bị nữa.

Tỷ lệ chiều rộng thiết bị, chiều cao thiết bị và tỷ lệ khung hình thiết bị không được chấp nhận trong Truy vấn phương tiện Cấp 4: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

Chỉ cần sử dụng chiều rộng / chiều cao (không có min / max) kết hợp với độ phân giải định hướng & (min / max-) để nhắm mục tiêu các thiết bị cụ thể. Trên chiều rộng / chiều cao di động phải giống với chiều rộng / chiều cao của thiết bị.