อะไรคือความแตกต่างระหว่างความกว้างสูงสุดของอุปกรณ์และความกว้างสูงสุดสำหรับเว็บบนมือถือ

ฉันต้องพัฒนาหน้า html สำหรับโทรศัพท์ iphone / android แต่อะไรคือความแตกต่างระหว่างmax-device-widthและmax-width? ฉันต้องใช้ CSS ที่แตกต่างกันสำหรับขนาดหน้าจอที่แตกต่างกัน

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

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

ความแตกต่างคืออะไร?

max-width คือความกว้างของพื้นที่แสดงผลเป้าหมายเช่นเบราว์เซอร์

max-device-width คือความกว้างของพื้นที่การเรนเดอร์ทั้งหมดของอุปกรณ์เช่นหน้าจออุปกรณ์จริง

กันไปmax-heightและเป็นmax-device-heightธรรมชาติ

max-widthmax-heightหมายถึงความกว้างของวิวพอร์ตและสามารถนำมาใช้ในการกำหนดเป้าหมายที่เฉพาะเจาะจงขนาดหรือรสนิยมร่วมกับ การใช้เงื่อนไขหลาย ๆmax-width(หรือmin-width) คุณสามารถเปลี่ยนสไตล์ของหน้าเว็บได้เมื่อเบราว์เซอร์ถูกปรับขนาดหรือการวางแนวบนอุปกรณ์เช่น iPhone

max-device-widthหมายถึงขนาดวิวพอร์ตของอุปกรณ์โดยไม่คำนึงถึงทิศทางขนาดปัจจุบันหรือการปรับขนาด สิ่งนี้จะไม่เปลี่ยนแปลงบนอุปกรณ์ดังนั้นจึงไม่สามารถใช้เพื่อสลับสไตล์ชีทหรือคำสั่ง CSS ได้เนื่องจากหน้าจอจะหมุนหรือปรับขนาด

คุณคิดอย่างไรเกี่ยวกับการใช้สไตล์นี้?

สำหรับจุดพักทั้งหมดซึ่งส่วนใหญ่สำหรับ "โทรศัพท์มือถือ" ผมใช้min(max)-device-widthและจุดพักซึ่งส่วนใหญ่สำหรับ "เดสก์ทอป" min(max)-widthการใช้

มี "อุปกรณ์เคลื่อนที่" จำนวนมากที่คำนวณความกว้างไม่ดี

ดู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-device-width คือความกว้างของการแสดงผลอุปกรณ์

@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 */
}

ความกว้างสูงสุดคือความกว้างของพื้นที่แสดงผลเป้าหมายหมายถึงขนาดปัจจุบันของเบราว์เซอร์

ความแตกต่างคือความกว้างสูงสุดของอุปกรณ์คือความกว้างของหน้าจอทั้งหมดและความกว้างสูงสุดหมายถึงพื้นที่ที่เบราว์เซอร์ใช้เพื่อแสดงหน้าเว็บ แต่ความแตกต่างที่สำคัญอีกอย่างก็คือการรองรับเบราว์เซอร์ Android จริง ๆ แล้วถ้าคุณจะใช้ความกว้างสูงสุดของอุปกรณ์มันจะใช้ได้เฉพาะใน Opera แต่ฉันแน่ใจว่าความกว้างสูงสุดจะใช้ได้กับเบราว์เซอร์มือถือทุกชนิด ( ฉันทดสอบใน Chrome Firefox และโอเปร่าสำหรับ Android)

max-widthคือความกว้างของพื้นที่แสดงผลเป้าหมายเช่นเบราว์เซอร์; max-device-widthคือความกว้างของพื้นที่การเรนเดอร์ทั้งหมดของอุปกรณ์เช่นหน้าจออุปกรณ์จริง

•หากคุณใช้ความกว้างสูงสุดของอุปกรณ์เมื่อคุณเปลี่ยนขนาดของหน้าต่างเบราว์เซอร์บนเดสก์ท็อปสไตล์ CSS จะไม่เปลี่ยนเป็นการตั้งค่าการสืบค้นสื่อที่แตกต่างกัน

•หากคุณใช้ความกว้างสูงสุดเมื่อคุณเปลี่ยนขนาดของเบราว์เซอร์บนเดสก์ท็อปของคุณ CSS จะเปลี่ยนเป็นการตั้งค่าการสืบค้นสื่อที่แตกต่างกันและคุณอาจแสดงด้วยสไตล์สำหรับโทรศัพท์มือถือเช่นเมนูที่ใช้งานง่าย

หากคุณกำลังสร้างแอพข้ามแพลตฟอร์ม (เช่นใช้ phonegap / cordova)

อย่าใช้ความกว้างของอุปกรณ์หรือความสูงของอุปกรณ์ ใช้ความกว้างหรือความสูงในการสืบค้นสื่อ CSS เพราะอุปกรณ์ Android จะให้ปัญหาเกี่ยวกับความกว้างของอุปกรณ์หรือความสูงของอุปกรณ์ สำหรับ iOS มันใช้งานได้ดี เฉพาะอุปกรณ์ android ไม่รองรับความกว้างของอุปกรณ์ / ความสูงอุปกรณ์

อย่าใช้ความกว้าง / ความสูงของอุปกรณ์อีกต่อไป

ความกว้างของอุปกรณ์, ความสูงของอุปกรณ์และอัตราส่วนภาพของอุปกรณ์ถูกคัดค้านใน Media Queries ระดับ 4: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

เพียงใช้ความกว้าง / ความสูง (ไม่เกินนาที / สูงสุด) ร่วมกับการวางแนว & (ต่ำสุด / สูงสุด -) เพื่อกำหนดเป้าหมายอุปกรณ์เฉพาะ เกี่ยวกับความกว้าง / ความสูงของมือถือควรจะเหมือนกับความกว้าง / ความสูงของอุปกรณ์