การรับขนาดหน้าจอจริง / dpi / ความหนาแน่นของพิกเซลใน Chrome บน Android

Question 1

คำถาม

มีวิธีที่ปลอดภัยในการรับขนาดทางกายภาพของหน้าจอที่ถูกต้องตามจริงใน Chrome บน Android หรือไม่ หากจำเป็น Chrome และ Android เวอร์ชันเก่าอาจอยู่นอกขอบเขตได้

การวิจัยก่อนหน้านี้

มีคำถามปลายตายมากมายเกี่ยวกับ stackoverflow เกี่ยวกับการรับขนาดหน้าจอจริงของอุปกรณ์จากภายใน javascript (หรือ css) ดูเหมือนว่าจะไม่มีการบรรจบกันระหว่างมาตรฐาน html api และการใช้งานเบราว์เซอร์จริงในนั้นไม่ต้องพูดถึงการใช้งานเบราว์เซอร์ที่อาศัย API ของ OS ซึ่งจะต้องพึ่งพาฮาร์ดแวร์ที่ให้ข้อมูลที่ถูกต้อง

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

ฉันต้องการสำรวจการมีอยู่ของโซลูชันง่ายๆโดยการ จำกัด สิ่งต่างๆให้เฉพาะ Chrome บน Android เท่านั้น

บันทึก

ทั้งหมดนี้เกี่ยวกับโซลูชัน javascript (หรือ css) ภายในเบราว์เซอร์ไม่ใช่โซลูชันสำหรับแอปเนทีฟ

Question 2

คุณไม่สามารถรับมิติทางกายภาพที่แท้จริงหรือ DPI จริงได้และแม้ว่าคุณจะทำได้ แต่ก็ไม่สามารถทำอะไรกับมันได้

นี่เป็นเรื่องราวที่ค่อนข้างยาวและซับซ้อนดังนั้นให้อภัยฉันด้วย

เว็บและเบราว์เซอร์ทั้งหมดกำหนด 1px เป็นหน่วยที่เรียกว่าพิกเซล CSS พิกเซล CSS ไม่ใช่พิกเซลจริง แต่เป็นหน่วยที่ถือว่ามีขนาด 1/96 ของนิ้วตามมุมมองของอุปกรณ์ นี้จะถูกระบุเป็นพิกเซลอ้างอิง

พิกเซลอ้างอิงคือมุมมองภาพของหนึ่งพิกเซลบนอุปกรณ์ที่มีความหนาแน่นของพิกเซล 96dpi และระยะห่างจากตัวอ่านความยาวของแขน สำหรับความยาวของแขนเล็กน้อย 28 นิ้วดังนั้นมุมมองภาพจึงอยู่ที่ประมาณ 0.0213 องศา สำหรับการอ่านที่ความยาวของแขน 1px จึงเท่ากับ 0.26 มม. (1/96 นิ้ว)

ในพื้นที่ 0.26 มม. เราอาจมีพิกเซลของอุปกรณ์จริงจำนวนมาก

เบราว์เซอร์ทำสิ่งนี้ด้วยเหตุผลดั้งเดิมเป็นหลัก - จอภาพส่วนใหญ่เป็น 96dpi เมื่อเว็บเกิด - แต่เพื่อความสม่ำเสมอใน "สมัยก่อน" ปุ่ม 22px บนหน้าจอ 15 นิ้วที่ 800x600 จะมีขนาดเป็นสองเท่าของปุ่ม 22px บน จอภาพขนาด 15 นิ้วที่ 1600x1200 ในกรณีนี้ DPI ของหน้าจอคือ 2x (ความละเอียดสองเท่าในแนวนอน แต่อยู่ในพื้นที่ทางกายภาพเดียวกัน) นี่เป็นสถานการณ์ที่ไม่ดีสำหรับเว็บและแอปดังนั้นระบบปฏิบัติการส่วนใหญ่จึงคิดค้นวิธีต่างๆในการกำหนดค่าพิกเซลแบบนามธรรมในหน่วยอิสระของอุปกรณ์ (DIPS บน Android, PT บน iOS และCSS Pixel บนเว็บ )

เบราว์เซอร์ iPhone Safari เป็นตัวแรก (สำหรับความรู้ของฉัน) ที่แนะนำแนวคิดของวิวพอร์ต สิ่งนี้สร้างขึ้นเพื่อเปิดใช้งานแอปพลิเคชันสไตล์เดสก์ท็อปเต็มรูปแบบเพื่อแสดงผลบนหน้าจอขนาดเล็ก วิวพอร์ตถูกกำหนดให้กว้าง 960px โดยพื้นฐานแล้วจะซูมหน้าออกเป็น 3x (เดิมคือ iPhone 320px) ดังนั้น 1 CSS พิกเซลเท่ากับ 1/3 ของพิกเซลจริง เมื่อคุณกำหนดวิวพอร์ตแม้ว่าคุณจะทำให้อุปกรณ์นี้จับคู่พิกเซล 1 CSS = 1 พิกเซลจริงที่ 163dpi

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

ด้วยการเปิดตัวอุปกรณ์ DPI สองเท่าผู้ผลิตโทรศัพท์มือถือไม่ต้องการให้หน้าเว็บบนมือถือมีขนาดเล็กลง 50% ดังนั้นพวกเขาจึงนำแนวคิดที่เรียกว่า devicePixelRatio (ฉันเชื่อว่าเป็นครั้งแรกใน webkit บนอุปกรณ์เคลื่อนที่) ซึ่งจะช่วยให้พวกเขาสามารถเก็บพิกเซล CSS 1 พิกเซลไว้ได้ประมาณ 1 / 96 นิ้ว แต่ขอให้คุณเข้าใจว่าเนื้อหาของคุณเช่นรูปภาพอาจต้องมีขนาดเป็นสองเท่า หากคุณดูซีรีส์ iPhone อุปกรณ์ทั้งหมดของพวกเขาบอกว่าความกว้างของหน้าจอในพิกเซล CSS คือ 320pxแม้ว่าเราจะรู้ว่าไม่เป็นความจริงก็ตาม

ดังนั้นหากคุณสร้างปุ่มให้มีขนาด 22px ในพื้นที่ CSS การแสดงบนหน้าจอจริงจะเป็นอัตราส่วนพิกเซลอุปกรณ์ 22 * ที่จริงฉันพูดแบบนี้มันไม่ได้เป็นเช่นนี้เพราะอัตราส่วนพิกเซลของอุปกรณ์ไม่เคยแน่นอนเช่นกันผู้ผลิตโทรศัพท์ตั้งค่าเป็นตัวเลขที่ดีเช่น 2.0, 3.0 แทนที่จะเป็น 2.1329857289918

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

คุณธรรมของเรื่องนี้คือ: อย่ากังวลเกี่ยวกับการทำความเข้าใจขนาดพิกเซลทางกายภาพของหน้าจอ คุณไม่จำเป็นต้องใช้มัน 50px ควรมีลักษณะใกล้เคียงกันในทุกอุปกรณ์มือถือซึ่งอาจแตกต่างกันเล็กน้อย แต่ CSS Pixel เป็นวิธีที่ไม่ขึ้นกับอุปกรณ์ของเราในการสร้างเอกสารและ UI ที่สอดคล้องกัน

แหล่งข้อมูล:

Question 3

จากคำตอบของ Matt ฉันได้ทำการทดสอบ:

// on Macbook Pro Retina (2880x1800, 15.4"), is the calculated diagonal size
// approximately 15.4? Let's see...

var svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var screenWidthMillimeters = svgEl.screenPixelToMillimeterX * 2880;
var screenHeightMillimeters = svgEl.screenPixelToMillimeterY * 1800;
var screenDiagonalMillimeters = Math.sqrt(Math.pow(screenWidthMillimeters, 2) + Math.pow(screenHeightMillimeters, 2)); // pythagorean theorem
var screenDiagonalInches = (screenDiagonalMillimeters / 10 / 2.54); // (mm / 10mm/cm) / 2.54cm/in = in

console.log("The calculated diagonal of the screen is "+screenDiagonalInches+" inches. \nIs that close to the actual 15.4\"?");

นี่คือผลลัพธ์:

The calculated diagonal of the screen is 35.37742738560738 inches. 
Is that close to the actual value of 15.4?

ไม่

ดูเหมือนว่าจะยังไม่มีวิธีรับค่าทางกายภาพที่แท้จริงในเว็บเบราว์เซอร์

Question 4

คุณสามารถสร้างองค์ประกอบของหน้าใดก็ได้และตั้งค่าความกว้างโดยใช้หน่วยจริง ตัวอย่างเช่น

<div id="meter" style="width:10cm"></div>

แล้วรับความกว้างเป็นพิกเซล ตัวอย่างเช่นโค้ด html ด้านล่าง (ฉันใช้ JQuery) แสดงความกว้างของหน้าจออุปกรณ์เป็นเซนติเมตร

<script>
var pixPer10CM = $('#meter').width();
var CMPerPix = 10 / pixPer10CM;
var widthCM = screen.width * CMPerPix;

alert(widthCM);
</script>

Question 5

คุณสามารถรับข้อมูลนั้นด้วย WURFL:

คุณสมบัติการแสดงผลของอุปกรณ์

แอตทริบิวต์เรียกว่า:

resolution_(width|height)

physical_display_(width|height)

เวอร์ชันยาว:

กลยุทธ์ที่ดีที่สุดและน่าเชื่อถือที่สุดในการบรรลุเป้าหมายนี้คือการส่งuser agent stringจากเบราว์เซอร์ไปยังฐานข้อมูลเช่นWURFL(หรืออื่น ๆ ) ฐานข้อมูลที่ทันสมัยซึ่งสามารถให้ข้อมูลที่จำเป็นได้

สตริงตัวแทนผู้ใช้

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

WURFL

นี่คือฐานข้อมูลที่ใช้กันทั่วไปในการตรวจจับคุณสมบัติของอุปกรณ์

ด้วยวิธีนี้คุณอาจรองรับอุปกรณ์ยอดนิยมส่วนใหญ่ในตลาดได้อย่างแม่นยำ ฉันจะโพสต์การสาธิตรหัส แต่มีให้ดาวน์โหลดบนWURFLเว็บไซต์ คุณสามารถค้นหาการสาธิตดังกล่าวได้จากโฟลเดอร์ตัวอย่าง / ตัวอย่างที่ดาวน์โหลดด้วยไลบรารี

ดาวน์โหลด WURFL

ข้อมูลเพิ่มเติมและคำอธิบายเกี่ยวกับการตรวจสอบขนาดและความละเอียดทางกายภาพ: http://www.scientiamobile.com/forum/viewtopic.php?f=16&t=286

Question 6

เพื่อเป็นส่วนเสริมของคำตอบ "ไม่มีทางออกที่ดีสำหรับปัญหานี้" เพียงตรวจสอบหน่วยที่คุณสามารถใช้บน CSS https://www.w3schools.com/cssref/css_units.asp

Unit    Description
cm      centimeters
mm      millimeters
in      inches (1in = 96px = 2.54cm)
px *    pixels (1px = 1/96th of 1in)
pt      points (1pt = 1/72 of 1in)
pc      picas (1pc = 12 pt)

* Pixels (px) are relative to the viewing device.
For low-dpi devices, 1px is one device pixel (dot) of the display.
For printers and high resolution screens 1px implies multiple device pixels.

ด้วยคำอธิบายนี้ดูเหมือนว่ามีทางออก cm, mmและinจะใช้ในการวาดสิ่งที่มีขนาดเดียวกันเป็นอิสระจากขนาดหน้าจอและความละเอียด กับในใจคุณสามารถคาดหวังว่าอย่างน้อยหนึ่งpx, ptหรือpcสามารถนำมาใช้ในการวาดในระดับพิกเซลสำหรับสิ่งที่มีความแม่นยำที่คุณต้องการจะใช้ (มิฉะนั้นสิ่งที่จุดที่มีนับล้านพิกเซลที่เหมาะสมหรือไม่) ดีไม่ หน่วยทั้งหมดเป็นเศษส่วนของหน่วยเมตริกทำให้หน่วยทั้งหมดนี้เป็นเพียงมาตราส่วนที่แตกต่างกัน และที่เลวร้ายที่สุดในเรื่องคือความจริงที่ว่าสิ่งเหล่านี้ไม่ถูกต้อง เพียงแค่เล่นกับตัวอย่าง w3schools (ลากเส้น 20 ซม. แล้ววัดด้วยไม้บรรทัด)

ดังนั้นในที่สุด: - มีวิธีการวาดสิ่งที่มีขนาดทางกายภาพอย่างถูกต้อง (ซึ่งควรจะเป็นกรณีที่ไม่มีcm, mm, inและในที่สุดptและpc) - ไม่มีทางที่จะวาดบางสิ่งที่มีขนาดเท่ากันโดยไม่ขึ้นกับขนาดหน้าจอและความละเอียด (ซึ่งควรเป็นอย่างน้อยpx)

นี่เป็นทั้งปัญหาการใช้งาน (ไม่ได้ใช้ขนาดหน้าจอจริง) และปัญหาการออกแบบ (เหตุใดจึงควรpxเป็นอิสระจากขนาดหน้าจอในขณะที่มีหน่วยจำนวนมากอยู่แล้ว)

Question 7

ฉันแก้ไขปัญหานี้ด้วยหนึ่งในโครงการเว็บของฉันhttp://www.vinodiscover.comคำตอบคือคุณไม่สามารถทราบแน่ชัดว่าขนาดทางกายภาพคืออะไร แต่คุณสามารถหาค่าประมาณได้ เมื่อใช้ JS และ / หรือ CSS คุณสามารถค้นหาความกว้างและความสูงของวิวพอร์ต / หน้าจอและความหนาแน่นของพิกเซลโดยใช้แบบสอบถามสื่อ ตัวอย่างเช่น iPhone 5 (326 ppi) = 320px x 568px และความหนาแน่น 2.0 พิกเซลในขณะที่ Samsung Galaxy S4 (441ppi) = 360px x 640px และความหนาแน่น 3.0 พิกเซล ความหนาแน่น 1.0 พิกเซลอย่างมีประสิทธิภาพอยู่ที่ประมาณ 150 ppi

ด้วยเหตุนี้ฉันจึงตั้งค่า CSS ให้แสดง 1 คอลัมน์เมื่อความกว้างน้อยกว่า 284px โดยไม่คำนึงถึงความหนาแน่นของพิกเซล จากนั้นสองคอลัมน์ระหว่าง 284px และ 568px; จากนั้น 3 คอลัมน์ที่สูงกว่า 852px ดูเหมือนว่ามันจะง่ายกว่ามากเนื่องจากเบราว์เซอร์จะทำการคำนวณความหนาแน่นของพิกเซลโดยอัตโนมัติ

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

Question 8

ในการตอบสนองต่อการตอบกลับของ zehelvion เกี่ยวกับการใช้ WURFL เพื่อค้นหาความละเอียดจึงควรค่าแก่การกล่าวถึงว่า WURFL มีให้ใช้งานเป็นข้อมูลโค้ด JavaScriptด้วย

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

Question 9

พิกเซล CSS ไม่ใช่ "พิกเซลอิสระของอุปกรณ์" จริงๆ แพลตฟอร์มเว็บประกอบด้วยอุปกรณ์ประเภทต่างๆ แม้ว่าพิกเซล CSS จะดูค่อนข้างสม่ำเสมอบนอุปกรณ์พกพา แต่ก็จะใหญ่ขึ้น 50% สำหรับจอภาพเดสก์ท็อป 96dpi ทั่วไป ดูของฉันคำถาม นี่ไม่ใช่เรื่องเลวร้ายในบางกรณีเช่นแบบอักษรควรมีขนาดใหญ่ขึ้นบนหน้าจอขนาดใหญ่เนื่องจากระยะห่างจากดวงตาใหญ่กว่า แต่มิติขององค์ประกอบ ui ควรจะค่อนข้างสม่ำเสมอ สมมติว่าแอปของคุณมีแถบด้านบนคุณอยากให้มีความหนาเท่ากันทั้งบนเดสก์ท็อปและโทรศัพท์มือถือโดยค่าเริ่มต้นจะมีขนาดเล็กลง 50% ซึ่งไม่ดีเพราะองค์ประกอบที่สัมผัสได้ควรมีขนาดใหญ่กว่า วิธีแก้ปัญหาเดียวที่ฉันพบคือใช้สไตล์ต่างๆตาม DPI ของอุปกรณ์

คุณสามารถรับหน้าจอ DPI ใน JavaScript ด้วย window.devicePixelRatio หรือแบบสอบถาม CSS:

@media  only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (-o-min-device-pixel-ratio: 13/10),
    only screen and (min-resolution: 120dpi)
    {
     /* specific styles for handhelds/ high dpi monitors*/
    }

ฉันไม่รู้ว่าการใช้สิ่งนี้จะใช้ได้ผลกับจอภาพเดสก์ท็อปที่มีความละเอียดสูงอย่างไร บางทีองค์ประกอบอาจน้อยเกินไป เป็นเรื่องที่น่าเสียดายจริงๆที่เว็บแพลตฟอร์มไม่ได้นำเสนออะไรที่ดีกว่า ฉันเดาว่าการใช้ dip คงไม่ยากเกินไป

Question 10

ฉันสังเกตเห็นในความคิดเห็นของคุณว่าจริงๆแล้วคุณกังวลกับขนาดที่ปุ่มต่างๆปรากฏต่อผู้ชม

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

<meta name="viewport" content="width=device-width, initial-scale=1">

Question 11

JqueryMobile ความกว้างขององค์ประกอบ

$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

JqueryMobile ความสูงขององค์ประกอบ

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

โชคดีแดนนี่ 117

Question 12

การใช้ฟังก์ชัน getPPI () ( เว็บบนอุปกรณ์เคลื่อนที่: วิธีรับขนาดพิกเซลทางกายภาพ? ) เพื่อรับรหัสหนึ่งนิ้วให้ใช้สูตรนี้:

var ppi = getPPI();
var x   = ppi * devicePixelRatio * screen.pixelDepth / 24;
$('#Cubo').width (x);
$('#Cubo').height(x);

<div id="Cubo" style="background-color:red;"></div>

Question 13

ฉันหวังว่าฉันจะตอบคำถามนี้ได้ แต่การสร้าง API ที่มีความสามารถไม่ได้ให้สิ่งจำเป็นพื้นฐานและสิ่งที่เป็นนามธรรมมากเกินไปในบางครั้ง

BTW ฉันมีประสบการณ์ 40 ปีในการออกแบบ UI และการออกแบบซอฟต์แวร์และพยายามผลักดันให้มีสิ่งนี้สำหรับสิ่งที่ดูเหมือนตลอดไปตั้งแต่ก่อนวันของไดรเวอร์ "VESA" :)

สำหรับหน้าจอสัมผัสฉันมีสิ่งหนึ่งที่เรียกว่า "fingerSize ()" ซึ่งเป็นจำนวนพิกเซลที่จะเป็น 1 ซม. (ใกล้เคียงกับเส้นผ่านศูนย์กลางของพื้นที่สัมผัสโดยเฉลี่ยของนิ้วมาก) แต่ข้อมูลรากคือ "dpcm"

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

    (Not code but I wanted fixed width font)

    Hand held - Phone/Tablet         25cm 
    Touch screen / Desktop Monitor   40cm         ( seated or standing at a counter
                                                    with partially extended arm )
    "Personal" Touch kiosk        50cm -> 80cm ( a bit further away standing 
                                                 extended arms and standing back 
                                                 to view )
    Presentation Screen.          any distance ( angle of view derived from pixel
                                                 width of device. An ideal conventional cinema 
                                                 seat (as opposed to imax or immersive) 
                                                 you want about 50 degrees
                                                 between edges of the screen. from viewer POV )

    So what you want universally available is:

    device usage type.
    finger size in pixels (dots per CM)
    pixel dimensions of display.

    Then internally, when laying out and drawing you want the size/shape of a pixel 
    for the current transform.

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

Question 14

คุณสามารถรับการประมาณขนาดคร่าวๆได้ แต่ไม่ถูกต้อง

ฉันได้รวบรวมตัวอย่างที่ฉันได้ทดสอบกับอุปกรณ์สองสามเครื่องเพื่อดูว่าผลลัพธ์เป็นอย่างไร iPhone 6 ของฉันส่งคืนค่าที่ใหญ่กว่าประมาณ 33% จอภาพเดสก์ท็อป 27 "บน Mac ของฉันรายงานว่าเป็นจอภาพ 30"

var $el = document.createElement('div');
$el.style.width = '1cm';
$el.style.height = '1cm';
$el.style.backgroundColor = '#ff0000';
$el.style.position = 'fixed';
$el.style.bottom = 0;
document.body.appendChild($el);
var screenDiagonal = Math.sqrt(Math.pow((window.screen.width / $el.offsetWidth), 2) + Math.pow((window.screen.height / $el.offsetHeight), 2));
var screenDiagonalInches = (screenDiagonal / 2.54);
var str = [
  '1cm (W): ' + $el.offsetWidth + 'px',
  '1cm (H): ' + $el.offsetHeight + 'px',
  'Screen width: ' + window.screen.width + 'px',
  'Screen height: ' + window.screen.height + 'px',
  'Browser width: ' + window.innerWidth + 'px',
  'Browser height: ' + window.innerHeight + 'px',
  'Screen available width: ' + window.screen.availWidth + 'px',
  'Screen available height: ' + window.screen.availHeight + 'px',
  'Screen width: ' + (window.screen.width / $el.offsetWidth).toFixed(2) + 'cm',
  'Screen height: ' + (window.screen.height / $el.offsetHeight).toFixed(2) + 'cm',
  'Screen diagonal: ' + screenDiagonal.toFixed(2) + 'cm',
  'Screen diagonal: ' + screenDiagonalInches.toFixed(2) + 'in',
  'Device Pixel Ratio: ' + (window.devicePixelRatio || 1)
].join('\n');
var $pre = document.createElement('pre');
$pre.innerHTML = str;
document.body.appendChild($pre);

ขยายข้อมูลโค้ด

http://codepen.io/kus/full/xOAPYB/