การเขียนโปรแกรม viewport

12

ฉันต้องการให้ผู้เยี่ยมชมสามารถดูภาพคุณภาพสูงมีวิธีใดบ้างที่ฉันสามารถตรวจสอบขนาดหน้าต่างได้ หรือดีกว่าขนาดวิวพอร์ตของเบราว์เซอร์ที่มี JavaScript ดูพื้นที่สีเขียวที่นี่:

788 javascript cross-browser viewport

15

คุณจะปิดการใช้งานการซูมวิวพอร์ตบน Mobile Safari ได้อย่างไร

ฉันได้ลองทั้งสามอย่างนี้แล้วไม่เกิดประโยชน์: <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” /> แต่ละค่าแตกต่างกันที่ฉันพบโดยการค้นหาของ Google หรือการค้นหา SO แต่ไม่มีค่า ' user-scalable = X ' ที่ใช้งานได้ ฉันยังพยายามจุลภาคคั่นค่าแทนเครื่องหมายอัฒภาคไม่มีโชค จากนั้นฉันพยายามเพียง แต่มีuser-scalableค่าอยู่ แต่ก็ยังไม่มีโชค UPDATE รับสิ่งนี้จากเว็บไซต์ของ Apple และใช้งานได้: <meta name="viewport" content="width=device-width, user-scalable=no" /> ปรากฎว่าปัญหาคือราคาที่ไม่ได้มาตรฐานเพราะฉันได้คัดลอกเมตาแท็กจากเว็บไซต์ที่ใช้พวกเขาอ๊ะ

393 html ios mobile-safari zoom viewport

9

วิธีเพิ่มขนาดหน้าต่างการแบ่งแนวตั้งใน Vim

:vsplit(รูปแบบย่อ:vs:) แบ่งวิวพอร์ตเป็นแนวตั้ง :30vsแบ่งวิวพอร์ตทำให้หน้าต่างใหม่กว้าง 30 อักขระ เมื่อสร้าง 30 หน้าต่าง char นี้แล้วจะเปลี่ยนขนาดเป็น 31 หรือ 29 ได้อย่างไร ด้วยหน้าต่างแนวนอนCtrl- W +เพิ่มจำนวนบรรทัดโดยหนึ่ง คำสั่งเทียบเท่าเพื่อเพิ่มคอลัมน์โดยหนึ่งคืออะไร

316 vim window viewport

7

การใช้ jQuery เพื่อรับขนาดวิวพอร์ต

ฉันจะใช้ jQuery เพื่อกำหนดขนาดของวิวพอร์ตของเบราว์เซอร์ได้อย่างไรและจะตรวจสอบสิ่งนี้อีกครั้งหากมีการปรับขนาดหน้า? ฉันต้องทำให้ขนาด IFRAME เป็นพื้นที่นี้ (มาเล็กน้อยในแต่ละระยะขอบ) สำหรับผู้ที่ไม่ทราบเบราว์เซอร์ viewport ไม่ใช่ขนาดของเอกสาร / หน้า มันเป็นขนาดที่มองเห็นได้ของหน้าต่างของคุณก่อนที่จะเลื่อน

308 jquery resize size viewport

30

ตรวจหาทิศทางของวิวพอร์ตหากการวางแนวเป็นข้อความแจ้งเตือนการแสดงผลแนวตั้งที่แจ้งให้ผู้ใช้ทราบถึงคำแนะนำ

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

195 javascript jquery mobile viewport device-orientation

17

ปิดใช้งานการซูม viewport ใน iOS 10+ ซาฟารีหรือไม่

ฉันได้อัปเดต iPhone ของฉัน 6 บวกเป็น iOS 10 รุ่นเบต้าและก็พบว่าในซาฟารีมือถือคุณสามารถซูมหน้าเว็บใด ๆ โดยการแตะหรือจับIGNOREuser-scalable=noรหัสในเมตาแท็ก ฉันไม่รู้ว่ามันเป็นบั๊กหรือฟีเจอร์ หากถือเป็นฟีเจอร์เราจะปิดการใช้งาน viewport zoom iOS 10 safari ได้อย่างไร อัปเดตในรุ่น iOS 11/12, iOS 11 และ iOS 12 ซาฟารียังคงไม่เคารพuser-scalable=noเมตาแท็ก

164 mobile-safari ios10 ios11 viewport ios12

9

รับวิวพอร์ต / ความสูงของหน้าต่างใน ReactJS

ฉันจะรับความสูงวิวพอร์ตใน ReactJS ได้อย่างไร ในจาวาสคริปต์ปกติฉันใช้ window.innerHeight() แต่ใช้ ReactJS ฉันไม่แน่ใจว่าจะรับข้อมูลนี้ได้อย่างไร ความเข้าใจของฉันคือ ReactDOM.findDomNode() ใช้งานได้กับส่วนประกอบที่สร้างขึ้นเท่านั้น อย่างไรก็ตามนี่ไม่ใช่กรณีสำหรับdocumentหรือbodyองค์ประกอบซึ่งอาจให้ความสูงของหน้าต่าง

160 javascript reactjs window viewport

7

HTML5 Canvas 100 ความกว้างความสูงของวิวพอร์ต

ฉันกำลังพยายามสร้างองค์ประกอบผ้าใบที่ใช้ความกว้างและความสูงของวิวพอร์ตได้ 100% คุณสามารถเห็นในตัวอย่างของฉันที่นี่ที่เกิดขึ้นอย่างไรก็ตามมันคือการเพิ่มแถบเลื่อนทั้งใน Chrome และ FireFox ฉันจะป้องกันแถบเลื่อนพิเศษและเพียงแค่กำหนดความกว้างและความสูงของหน้าต่างให้เท่ากับขนาดของผืนผ้าใบได้อย่างไร

151 jquery html canvas viewport

2

แอตทริบิวต์ meta viewport ที่ย่อขนาดลงไปทำอะไร

ฉันมีปัญหาในการค้นหาเอกสารสำหรับสิ่งนี้ Safari นั้นเฉพาะเจาะจงหรือไม่? มีข้อผิดพลาดเมื่อเร็ว ๆ นี้ใน iOS 9 ( ที่นี่ ) วิธีการแก้ปัญหาซึ่งเป็นการเพิ่มshrink-to-fit=noไปยังเมตาวิวพอร์ต รหัสนี้ทำอะไร?

143 html safari webkit ios9 viewport

16

ล้น: x: ซ่อนไม่ได้ป้องกันเนื้อหาจากการล้นในเบราว์เซอร์มือถือ

ฉันมีเว็บไซต์ที่นี่ ดูได้ในเบราว์เซอร์สก์ท็อปที่แถบเมนูสีดำถูกขยายครอบคลุมเฉพาะไปที่ขอบของหน้าต่างตั้งแต่มี bodyoverflow-x:hidden ในเบราว์เซอร์มือถือไม่ว่าจะเป็น Android หรือ iOS แถบเมนูสีดำจะแสดงความกว้างเต็มรูปแบบซึ่งจะทำให้ช่องว่างทางด้านขวาของหน้าเว็บ เท่าที่ฉันสามารถบอกได้ช่องว่างนี้ไม่ได้เป็นส่วนหนึ่งของhtmlหรือbodyแท็ก แม้ว่าฉันจะตั้งค่าวิวพอร์ตเป็นความกว้างเฉพาะใน<head>: <meta name="viewport" content="width=1100, initial-scale=1"> ไซต์ขยายเป็น 1100px แต่ยังคงมีช่องว่างเกิน 1100 ฉันพลาดอะไรไป ฉันจะเก็บวิวพอร์ตเป็น 1100 และตัดการโอเวอร์โฟลว์ได้อย่างไร

142 css overflow viewport mobile-browser

6

ใช้ jquery เพื่อรับตำแหน่งขององค์ประกอบที่สัมพันธ์กับวิวพอร์ต

อะไรคือวิธีที่เหมาะสมในการรับตำแหน่งขององค์ประกอบบนเพจที่สัมพันธ์กับวิวพอร์ต (แทนที่จะเป็นเอกสาร) jQuery.offsetฟังก์ชั่นดูเหมือนมีแนวโน้ม: รับพิกัดปัจจุบันขององค์ประกอบแรกหรือตั้งค่าพิกัดของทุกองค์ประกอบในชุดขององค์ประกอบที่ตรงกันโดยสัมพันธ์กับเอกสาร แต่นั่นสัมพันธ์กับเอกสาร มีวิธีการเทียบเท่าที่ส่งคืนค่าชดเชยที่สัมพันธ์กับวิวพอร์ตหรือไม่

117 javascript jquery position viewport offset

4

jquery $ (window) .width () และ $ (window) .height () ส่งคืนค่าที่แตกต่างกันเมื่อวิวพอร์ตไม่ได้รับการปรับขนาด

ฉันกำลังเขียนไซต์โดยใช้ jquery ที่เรียกซ้ำ ๆ$(window).width()และ$(window).height()เพื่อกำหนดตำแหน่งและขนาดองค์ประกอบตามขนาดวิวพอร์ต ในการแก้ไขปัญหาฉันพบว่าฉันได้รับรายงานขนาดวิวพอร์ตที่แตกต่างกันเล็กน้อยในการเรียกซ้ำไปยังฟังก์ชัน jquery ด้านบนเมื่อไม่ได้ปรับขนาดวิวพอร์ต สงสัยว่ามีกรณีพิเศษใดที่ใคร ๆ ก็รู้ว่าเมื่อเกิดเหตุการณ์นี้ขึ้นหรือเป็นอย่างนั้น ความแตกต่างของขนาดที่รายงานคือ 20px หรือน้อยกว่าปรากฏ เกิดขึ้นใน Safari 4.0.4, Firefox 3.6.2 และ Chrome 5.0.342.7 beta บน Mac OS X 10.6.2 ฉันยังไม่ได้ทดสอบเบราว์เซอร์อื่น ๆ เพราะดูเหมือนว่าเบราว์เซอร์ไม่เฉพาะเจาะจง ฉันยังไม่สามารถเข้าใจได้ว่าความแตกต่างนั้นขึ้นอยู่กับความแตกต่างอย่างไรหากไม่ใช่ขนาดวิวพอร์ตอาจมีปัจจัยอื่นที่ทำให้ผลลัพธ์แตกต่างกันได้หรือไม่ ข้อมูลเชิงลึกใด ๆ จะได้รับการชื่นชม ปรับปรุง: ไม่ใช่ค่านิยม$(window).width()และ$(window).height()ที่กำลังเปลี่ยนแปลง มันคือค่าของตัวแปรที่ฉันใช้เพื่อเก็บค่าข้างต้น ไม่ใช่แถบเลื่อนที่ทำให้ค่าสมบูรณ์ไม่มีแถบเลื่อนปรากฏขึ้นเมื่อค่าตัวแปรเปลี่ยนไป นี่คือรหัสของฉันที่ใช้เก็บค่าในตัวแปรของฉัน (ซึ่งฉันกำลังทำอยู่เพื่อให้มันสั้นลง) (ทั้งหมดนี้อยู่ภายใน$(document).ready()) // ในตอนแรกประกาศตัวแปรที่จะมองเห็นได้สำหรับฟังก์ชัน otehr ภายใน .ready() var windowWidth = $(window).width(); …

105 jquery resize height width viewport

4

"meta viewport user-scalable = no" ใน Google Maps API คืออะไร

ฉันใช้ Google Maps JavaScript API V3 และตัวอย่างอย่างเป็นทางการคุณจะใส่เมตาแท็กนี้ไว้เสมอ: <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> ตัวอย่างของบุคคลที่สามส่วนใหญ่ที่ฉันเคยเห็นก็ทำเช่นกัน ฉันเขียนปลั๊กอินโดยใช้มันและผู้ใช้คนหนึ่งของฉันบอกฉันว่ามันทำให้เขาไม่สามารถซูมเข้าและออกบนอุปกรณ์มือถือของเขาได้ ฉันไม่มีอุปกรณ์มือถือที่จะทดสอบและไม่มีการค้นหาของฉันเปิดเผยข้อมูลที่เป็นประโยชน์ใด ๆ แล้วจุดของแท็กคืออะไร? ฉันควรปล่อยไว้หรือไม่ ฉันควรพยายามตรวจหาตัวแทนเบราว์เซอร์และแสดงเฉพาะเบราว์เซอร์เดสก์ท็อปหรือไม่ หากคุณต้องการที่จะตรวจสอบปลั๊กอินคุณสามารถดาวน์โหลดได้ , เรียกดูแหล่งที่มาหรือดูตัวอย่างจริง

99 mobile google-maps-api-3 viewport meta-tags

3

ฉันสามารถเปลี่ยนเมตาแท็กของวิวพอร์ตในซาฟารีมือถือได้ทันทีหรือไม่

ฉันมีแอป AJAX ที่สร้างขึ้นสำหรับเบราว์เซอร์ Safari บนมือถือที่ต้องการแสดงเนื้อหาประเภทต่างๆ สำหรับเนื้อหาบางอย่างที่ฉันต้องการuser-scalable=1และสำหรับคนอื่น ๆ user-scalable=0ที่ฉันต้องการ มีวิธีแก้ไขค่าของแอตทริบิวต์เนื้อหาโดยไม่ต้องรีเฟรชหน้าหรือไม่ <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

98 javascript mobile-safari viewport

1

ผลข้างเคียงของการลบ“ width = ความกว้างของอุปกรณ์” ออกจากเมตาแท็กของวิวพอร์ตเมื่อตั้งค่า“ initial-scale = 1.0”

แม้ว่า<meta name="viewport">แท็กนั้นจะไม่ได้มาตรฐาน แต่ก็เป็น "เบราว์เซอร์มือถือส่วนใหญ่นับถือ ข้อเสียอย่างหนึ่งที่ไม่ใช่มาตรฐานเว็บจริงคือเอกสารรายละเอียดไม่สามารถใช้ได้เหมือนมาตรฐานอื่น ๆ คณะทำงาน CSSมีข้อกำหนดสำหรับนี้จึงเป็นสิ่งที่ผมกำลังส่วนใหญ่ใช้เป็นที่ทำงานเผด็จการ คำถามหลักของฉันคือ: อะไรคือความแตกต่างที่รับรู้ระหว่างการประกาศต่อไปนี้ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="initial-scale=1.0"> ถามอีกทางหนึ่งอะไรคือความแตกต่างระหว่าง@viewport CSS กับกฎเหล่านี้: /* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */ @viewport { zoom: 1.0; min-width: extend-to-zoom; max-width: 100vw; } /* Translated from <meta name="viewport" content="initial-scale=1.0"> */ @viewport { zoom: 1.0; min-width: extend-to-zoom; …

9 css viewport meta-tags meta

คำถามติดแท็ก viewport