[英]Can't get my website to run full screen in mobile browsers (when saved to home screen)
我是javascript的新手，最近創建了一個網站作為練習。 我一直試圖讓網站在移動瀏覽器中顯示為全屏網絡應用程序，但似乎沒有任何效果。 我基本上去過所有可以找到的相關網站和資源，但仍然沒有。 我開始認為這可能是我忽略的其他地方的一些愚蠢的小錯誤。 非常感謝來自更有經驗的政黨的任何幫助<3
網站供參考： 是
我試過的事情：
1） <meta name="apple-mobile-web-app-capable" content="yes">
結果：似乎沒有對移動webapp產生任何明顯的差異，並且當我添加到主屏幕並嘗試從那里打開時，結果相同。
2）創建一個完整的manifest.json文件，將其鏈接到我的index.html。 Chrome開發工具無法檢測到我的清單文件，但pwabuilder.com可以。
我也嘗試更改源中的/（在index.html中鏈接manifest.json）並同時嘗試上述兩個嘗試。 我讀到它可能是一個緩存問題，所以我也嘗試清理我的緩存幾次，重新安裝chrome，以及許多其他徒勞的嘗試。
這是我的index.html的相關部分
<meta name="viewport" content = "width = device-width, initial-scale = 0.7, user-scalable = no">
<link rel="manifest" href="/manifest.json">
<link rel="stylesheet" href="styles.css">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
當我嘗試pwa方法（使用manifest.json）由於某種原因chrome沒有檢測到我的清單文件。 我已經排除故障，我的代碼和鏈接與幾個教程和參考相同，但它仍然沒有檢測到。 我仍然在我的iPhone上嘗試過，但它仍然從我的主屏幕打開safari。
嘗試了蘋果元標記方法，但這行代碼字面上也沒有產生明顯的差異。
我相信您的特定網站的問題是清單不在標題中。 下面是一些示例代碼，顯示清單鏈接的正確位置。
如果您想在Chrome for Android上添加主屏幕按鈕（還必須包含short_name或名稱，必須包含192px和512px大小的圖標，start_url，請確保您的清單包含被認為有資格安裝的最少元素） display必須是以下之一：fullscreen，standalone或minimal-ui）。 您可以在Google PWA Developers網站上找到更多信息。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="/manifest.json"><!-- Note manifest is in the header -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Content Here</h1>
</body>
</html>
在Chrome DevTools上，您可以在Application菜單項上檢查manifest.json，還有一個Application / Manifest部分。
解決了！ 問題似乎是我在我身上發生了太多事情。 我剛剛將一堆HTML轉移到了body部分，並且chrome dev工具檢測到了manifest。
手機Safari中，網站添加到主屏，頁面導航時上下顯示灰條，如何全屏顯示？
[英]In mobile Safari, website added to Home screen, shows gray bars on the top and bottom when navigating pages, how to make it full screen?
如何為我的響應式網站創建鏈接，為移動用戶（Android/iPhone）“添加到主屏幕”
[英]how to create link for my responsive website that "Add to home screen" for mobile user (Android/iPhone)
全屏和非全屏時，如何在html頁面上獲得相同的坐標？
[英]How can I get the same coordinates on an html page when it is full screen and when it is not full screen?
當移動設備訪問我的 Web 服務器時，如何獲取它們的屏幕大小？
[英]How can I get the screen size of mobile devices when they hit my web server?
從手機查看時，媒體查詢不適用於頁腳部分，但在調整瀏覽器屏幕大小時有效
[英]Media query doesn't apply on footer section when viewed from a mobile phone but works when resize the browsers screen
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.