ข้อความค้นหาสื่อ CSS ของ iPhone 5

iPhone 5 มีหน้าจอที่ยาวขึ้นและไม่ดึงดูดมุมมองบนมือถือของเว็บไซต์ของฉัน คำถามเกี่ยวกับการออกแบบที่ตอบสนองใหม่สำหรับ iPhone 5 คืออะไรและฉันสามารถรวมกับคำค้นหาของ iPhone ที่มีอยู่ได้หรือไม่

ข้อความค้นหาสื่อปัจจุบันของฉันคือ:

@media only screen and (max-device-width: 480px) {}

device-aspect-ratioคุณลักษณะสื่ออื่นที่มีประโยชน์คือ

หมายเหตุว่าiPhone 5 ไม่ได้มีอัตราส่วน ในความเป็นจริง 40:71

iPhone <5:
@media screen and (device-aspect-ratio: 2/3) {}

iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {}

ไอโฟน 6:
@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}

iPad:
@media screen and (device-aspect-ratio: 3/4) {}

ข้อมูลอ้างอิง:
Media Queries @ W3C
iPhone Model Comparison
Aspect Ratio Calculator

มีสิ่งนี้ซึ่งฉันให้เครดิตกับบล็อกนี้ :

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 5 only */
}

โปรดทราบว่า iPhone 5 จะตอบสนองไม่ใช่กับ iOS เวอร์ชันใดเวอร์ชันหนึ่งที่ติดตั้งบนอุปกรณ์ดังกล่าว

หากต้องการรวมเข้ากับเวอร์ชันที่คุณมีอยู่คุณควรคั่นด้วยเครื่องหมายจุลภาค:

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone only */
}

หมายเหตุ: ฉันยังไม่ได้ทดสอบโค้ดด้านบน แต่ฉันเคยทดสอบการ@mediaสืบค้นที่คั่นด้วยจุลภาคมาก่อนแล้วและก็ใช้ได้ดี

โปรดทราบว่าข้างต้นอาจกระทบกับอุปกรณ์อื่น ๆ ที่มีอัตราส่วนใกล้เคียงกันเช่น Galaxy Nexus ต่อไปนี้เป็นวิธีการเพิ่มเติมซึ่งจะกำหนดเป้าหมายเฉพาะอุปกรณ์ที่มีขนาด 640px (560px เนื่องจากความผิดปกติของพิกเซลการแสดงผลแปลก ๆ ) และหนึ่งในระหว่าง 960px (iPhone <5) และ 1136px (iPhone 5)

@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
    /* iPhone only */
}

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

คำค้นหานี้จะใช้ได้กับอุปกรณ์ใด ๆ ที่มีหน้าจอขนาดเล็กและการออกแบบของคุณอาจจะเสีย

เมื่อรวมกับข้อความค้นหาสื่อเฉพาะอุปกรณ์ที่คล้ายกัน (สำหรับ HTC, Samsung, IPod, Nexus ... ) วิธีปฏิบัตินี้จะเป็นการระเบิดเวลา สำหรับการดีบั๊กแนวคิดนี้สามารถทำให้ CSS ของคุณเป็นสปาเกตตีที่ไม่มีการควบคุม คุณไม่สามารถทดสอบอุปกรณ์ที่เป็นไปได้ทั้งหมด

โปรดทราบว่าข้อความค้นหาสื่อเดียวที่กำหนดเป้าหมายไปที่ iPhone5 เสมอและไม่มีสิ่งอื่นใดคือ

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

โปรดทราบว่าความกว้างและความสูงที่แน่นอนไม่ใช่ความกว้างสูงสุดจะถูกตรวจสอบที่นี่

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

/ * รูปแบบการลดระดับเรากำลังตรวจสอบความกว้างของหน้าจอเท่านั้นสิ่งนี้จะเปลี่ยนจากแนวตั้งเป็นแนวนอน * /

/*css for desktops here*/

@media (max-device-width: 1024px) {
  /*IPad portrait AND netbooks, AND anything with smaller screen*/
  /*make the design flexible if possible */
  /*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
 /*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
 /*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
 /*IPhone portrait and smaller. You can probably stop on 320px*/
}

หากผู้เยี่ยมชมเว็บไซต์ของคุณมากกว่า 30% มาจากอุปกรณ์เคลื่อนที่ให้พลิกแผนนี้กลับหัวโดยให้แนวทางสำหรับอุปกรณ์เคลื่อนที่เป็นอันดับแรก ใช้min-device-widthในกรณีนั้น วิธีนี้จะเร่งการแสดงผลหน้าเว็บสำหรับเบราว์เซอร์บนมือถือ

สำหรับฉันแบบสอบถามที่ได้งานคือ:

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)

iPhone 5 ในแนวตั้งและแนวนอน

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

/* styles*/
}

iPhone 5 ในแนวนอน

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/* styles*/

}

iPhone 5 ในแนวตั้ง

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
 /* styles*/

}

ไม่มีคำตอบใดที่เหมาะกับฉันที่กำหนดเป้าหมายไปที่แอป phonegapp

ตามลิงก์ต่อไปนี้วิธีแก้ปัญหาด้านล่างใช้งานได้

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    // css here
}

เป็นเพียงการเพิ่มอย่างรวดเร็วเนื่องจากฉันได้ทดสอบตัวเลือกบางอย่างและพลาดสิ่งนี้ไประหว่างทาง ตรวจสอบให้แน่ใจว่าเพจของคุณมี:

<meta name="viewport" content="initial-scale=1.0">

คุณสามารถรับคำตอบได้ค่อนข้างง่ายสำหรับ iPhone5 พร้อมกับสมาร์ทโฟนอื่น ๆ บนฐานข้อมูลคุณสมบัติสื่อสำหรับอุปกรณ์มือถือ:

http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

คุณสามารถรับค่าอุปกรณ์ของคุณเองได้ในหน้าทดสอบบนเว็บไซต์เดียวกัน

(ข้อจำกัดความรับผิดชอบ: นี่คือเว็บไซต์ของฉัน)

afaik no iPhone ใช้อัตราส่วนพิกเซล 1.5

iPhone 3G / 3GS: (-webkit-device-pixel-ratio: 1) iPhone 4G / 4GS / 5G: (-webkit-device-pixel-ratio: 2)

/* iPad */
@media screen and (min-device-width: 768px) {
    /* ipad-portrait */
    @media screen and (max-width: 896px) { 
        .logo{
            display: none !important;
        }
    }
    /* ipad-landscape */
    @media screen and (min-width: 897px) { 

    }
}
/* iPhone */
@media screen and (max-device-width: 480px) {
    /* iphone-portrait */
    @media screen and (max-width: 400px) { 

    }
    /* iphone-landscape */
    @media screen and (min-width: 401px) { 

    }
}

คุณควรจะลด "-webkit-min-device-pixel-ratio" เป็น 1.5 เพื่อจับ iPhone ทั้งหมดหรือไม่

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 1.5) {
/* iPhone only */
}