เบราว์เซอร์ iPad มาตรฐาน WIDTH & HEIGHT

125

มีใครทราบความกว้างและความสูงที่ปลอดภัยที่สุดสำหรับ BODY เมื่อดูหน้าเว็บใด ๆ บน iPad? ฉันต้องการหลีกเลี่ยงแถบเลื่อนให้มากที่สุด

ขอบคุณ

เอริค

width

— เอริค
แหล่งที่มา

1

นี่คือลิงก์ไปยังเครื่องจำลองที่ใช้เบราว์เซอร์ที่คุณสามารถใช้ทดสอบโหมดแนวนอนของ iPad http://alexw.me/ipad2/#!safari

— Venkat - เปิดใน

277

ความกว้างและความสูงของพิกเซลของหน้าเว็บของคุณจะขึ้นอยู่กับการวางแนวและแท็กเมตาวิวพอร์ตหากระบุไว้ นี่คือผลลัพธ์ของการเรียกใช้ $ (window) .width () และ $ (window) .height () ของ jquery บนเบราว์เซอร์ iPad 1

เมื่อเพจไม่มีเมตาแท็กวิวพอร์ต:

แนวตั้ง: 980x1208
แนวนอน: 980x661

เมื่อหน้าเว็บมีเมตาแท็กทั้งสองนี้:

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1">

แนวตั้ง: 768x946
แนวนอน: 1024x690

ด้วย<meta name="viewport" content="width=device-width">:

แนวตั้ง: 768x946
แนวนอน: 768x518

ด้วย<meta name="viewport" content="height=device-height">:

แนวตั้ง: 980x1024
แนวนอน: 980x1024

ด้วย<meta name="viewport" content="height=device-height,width=device-width">:

แนวตั้ง: 768x1024
แนวนอน: 768x1024

กับ <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">

แนวตั้ง: 768x1024
แนวนอน: 1024x1024

กับ <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,height=device-height">

แนวตั้ง: 831x1024
แนวนอน: 1520x1024

— Paul Rademacher
แหล่งที่มา

สิ่งเหล่านี้สำหรับ ipad 2 ที่ใช้ ios 5.x หรือไม่ ios 4.x ที่รันของ ipad 1 ไม่มีแถบแท็บใต้แถบที่อยู่

— Ericson578

Ericson578: ทั้งหมดนี้มีไว้สำหรับ ipad 1

— Paul Rademacher

2

1024x1024 พิมพ์ผิดหรือเปล่า

— Ciantic

@Ciantic ไม่พิมพ์ผิดฉันกลัว

— kim3er

13

ไม่มีคำตอบง่ายๆสำหรับคำถามนี้ WebKit เวอร์ชันมือถือของ Apple ที่ใช้ใน iPhone, iPod Touches และ iPads จะปรับขนาดหน้าให้พอดีกับหน้าจอซึ่งเป็นจุดที่ผู้ใช้สามารถซูมเข้าและออกได้อย่างอิสระ

กล่าวคือคุณสามารถออกแบบเพจของคุณเพื่อลดจำนวนการซูมที่จำเป็นให้เหลือน้อยที่สุด ทางออกที่ดีที่สุดของคุณคือทำให้ความกว้างและความสูงเท่ากับความละเอียดที่ต่ำกว่าของ iPad เนื่องจากคุณไม่รู้ว่าจะเน้นไปทางใด กล่าวอีกนัยหนึ่งคือคุณต้องสร้างหน้าของคุณเป็น 768x768 เพื่อให้พอดีกับหน้าจอของ iPad ไม่ว่าจะเน้นเป็น 1024x768 หรือ 768x1024

ที่สำคัญคุณต้องการออกแบบเพจของคุณด้วยการควบคุมขนาดใหญ่ที่มีพื้นที่มากมายที่ง่ายต่อการกดด้วยนิ้วหัวแม่มือคุณสามารถออกแบบเพจขนาด 768x768 ที่รกมากดังนั้นจึงต้องใช้การซูมจำนวนมาก เพื่อให้บรรลุเป้าหมายนี้คุณอาจต้องการแบ่งการควบคุมของคุณออกเป็นหน้าเว็บต่างๆ

ในทางกลับกันมันไม่ใช่การแสวงหาที่คุ้มค่าที่สุด หากในขณะที่ออกแบบคุณพบโอกาสที่จะทำให้หน้าของคุณ "เป็นมิตรกับนิ้วมือ" มากขึ้นก็ไปได้เลย ... แต่ความจริงก็คือผู้ใช้ iPad มักจะรู้สึกสบายใจมากกับการเลื่อนไปมาและซูมเข้าและออกจากหน้าเพื่อไปยังสิ่งต่างๆ จำเป็นสำหรับเว็บไซต์ส่วนใหญ่ หากมีสิ่งใดคุณอาจต้องการออกแบบเพื่อให้เอื้อต่อการนำทางประเภทนี้

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

— macamatic
แหล่งที่มา

ฉันขอบคุณมากสำหรับการตอบกลับ ฉันเห็นด้วย. ฉันยังซื้อ iPad ไม่ได้ ฉันรู้สึกว่าคนส่วนใหญ่จะดูหน้าเว็บในแนวตั้งมากกว่าแนวนอน ฉันรู้ว่าฉันจะ และขอขอบคุณสำหรับการแจ้งเตือน Finger Friendly จริงแท้แน่นอน! ขอบคุณ Erik

— Erik

4

768x1024 ไม่ได้คำนึงถึงขนาดของแถบ URL และแท็บและจะแตกต่างกันไปตาม iPad (1 หรือ 2 และระหว่าง iOS 4 และ 5)

— Ericson578

0

คุณสามารถลองสิ่งนี้:

    /*iPad landscape oriented styles */

    @media only screen and (device-width:768px)and (orientation:landscape){
        .yourstyle{

        }

    }

    /*iPad Portrait oriented styles */

    @media only screen and (device-width:768px)and (orientation:portrait){
        .yourstyle{

        }
    }

— José Moreira de Freitas Junior
แหล่งที่มา