ฉันพยายามบังคับใช้โหมด "แนวนอน" สำหรับแอปพลิเคชันของฉันเนื่องจากแอปพลิเคชันของฉันไม่ได้ออกแบบมาสำหรับโหมด "แนวตั้ง" ฉันจะทำเช่นนั้นได้อย่างไร?
ฉันพยายามบังคับใช้โหมด "แนวนอน" สำหรับแอปพลิเคชันของฉันเนื่องจากแอปพลิเคชันของฉันไม่ได้ออกแบบมาสำหรับโหมด "แนวตั้ง" ฉันจะทำเช่นนั้นได้อย่างไร?
คำตอบ:
ขณะนี้สามารถทำได้ด้วยไฟล์ Manifest ของเว็บแอป HTML5 ดูด้านล่าง
คำตอบเดิม:
คุณไม่สามารถล็อกเว็บไซต์หรือเว็บแอปพลิเคชันในแนวเฉพาะได้ ขัดต่อพฤติกรรมตามธรรมชาติของอุปกรณ์
คุณสามารถตรวจจับการวางแนวอุปกรณ์ด้วยคิวรี่สื่อ CSS3 ดังนี้:
@media screen and (orientation:portrait) {
// CSS applied when the device is in portrait mode
}
@media screen and (orientation:landscape) {
// CSS applied when the device is in landscape mode
}
หรือโดยการผูกเหตุการณ์การเปลี่ยนแปลงการวางแนวของ JavaScript ดังนี้:
document.addEventListener("orientationchange", function(event){
switch(window.orientation)
{
case -90: case 90:
/* Device is in landscape mode */
break;
default:
/* Device is in portrait mode */
}
});
อัปเดตเมื่อวันที่ 12 พฤศจิกายน 2557: ขณะนี้สามารถใช้งานไฟล์ Manifest ของเว็บ HTML5 ได้แล้ว
ตามที่อธิบายไว้ในhtml5rocks.comตอนนี้คุณสามารถบังคับโหมดการวางแนวโดยใช้manifest.json
ไฟล์ได้
คุณต้องรวมบรรทัดเหล่านั้นลงในไฟล์ json:
{
"display": "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
"orientation": "landscape", /* Could be "landscape" or "portrait" */
...
}
และคุณต้องรวมรายการไว้ในไฟล์ html ของคุณดังนี้:
<link rel="manifest" href="manifest.json">
ไม่แน่ใจว่าการสนับสนุนในรายการเว็บแอปสำหรับการล็อกโหมดการวางแนว แต่ Chrome อยู่ที่นั่นแน่นอน จะอัปเดตเมื่อฉันมีข้อมูล
screen.orientation.lock('landscape');
จะบังคับให้เปลี่ยนเป็นและอยู่ในโหมดแนวนอน ทดสอบกับ Nexus 5
ฉันใช้ css แบบนี้ (ตามเทคนิค css ):
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
height: 100vw;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}
landscape
เป็นportrait
และมันทำงานได้ตามที่คาดไว้@media screen and (orientation: portrait)
portrait
(เพื่อที่จะเปลี่ยนเป็นlandscape
)
vh
to vw
และvw
to vh
ในไฟล์ CSS ทั้งหมด (ในโหมดแนวตั้ง) ... ดังนั้นถ้าใครไม่สำเร็จอาจเป็นเพราะมัน
ฉันมีปัญหาเดียวกันมันเป็นไฟล์ manifest.json ที่หายไปหากไม่พบเบราว์เซอร์ตัดสินใจด้วยการวางแนวที่เหมาะสมที่สุดหากคุณไม่ระบุไฟล์หรือใช้เส้นทางที่ไม่ถูกต้อง
ฉันแก้ไขเพียงแค่เรียก manifest.json อย่างถูกต้องบนส่วนหัว html
ส่วนหัว html ของฉัน:
<meta name="application-name" content="App Name">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="manifest" href="manifest.json">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#">
<meta name="msapplication-TileColor" content="#">
<meta name="msapplication-config" content="browserconfig.xml">
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#ffffff">
<link rel="shortcut icon" href="favicon.ico">
และเนื้อหาไฟล์ manifest.json:
{
"display": "standalone",
"orientation": "portrait",
"start_url": "/",
"theme_color": "#000000",
"background_color": "#ffffff",
"icons": [
{
"src": "android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
}
ในการสร้าง Favicons และไอคอนของคุณให้ใช้ webtool นี้: https://realfavicongenerator.net/
ในการสร้างไฟล์รายการของคุณให้ใช้: https://tomitm.github.io/appmanifest/
กปภ. ของฉันใช้งานได้ดีหวังว่าจะช่วยได้!