HTML5 IOS WebApp畫布不從主屏幕啓動時呈現

我有一個簡單的HTML5 Web應用程序，它使用javascript創建畫布上下文並繪製插入符號（^）的簡單圖像，然後在CSS類的定義中引用在多個標籤上渲染圖像。HTML5 IOS WebApp畫布不從主屏幕啓動時呈現

應用程序顯示在瀏覽器中細：曾嘗試谷歌瀏覽器（Win7的），移動Safari瀏覽器（iPad的IOS4 & IOS5的iPod（IOS4 & IOS5）但是，如果在iPad或iPod我「添加到主屏幕」和然後啓動Web應用程序^ ^圖像沒有呈現到。

我知道HTML5在從主屏幕啓動而不是在Safari中查看時呈現的方式有所不同，但是我的搜索沒有發現任何東西這將表明這不應該工作。

如果有人能爲我解釋這一點，我將不勝感激

代碼示例如下：

**(index.html)** 
<html> 
<head> 
    <link rel="stylesheet" href="styles/main.css" > 
    <script src="scripts/main.js"></script> 
</head> 
<body> 
    <div class="scoreboard-item-wrapper"> 
    <div class="scoreboard-item"> 
     <div class="box" ><button id="btn_homegoalup" class="up" onclick="incAction(true,true)"></button> 
     </div> 
    </div> 
    </div> 
</body> 
</html> 

**(main.js)** 
initChevronUp("chevron-up", "hsl(228, 1%, 50%)"); 

function initChevronUp(id, style) { 
    var context = document.getCSSCanvasContext("2d", id, 22, 13); 

    context.save(); 
    context.translate(4,0); 
    context.clearRect(0, 0, 20, 13); 
    context.strokeStyle = style; 
    context.lineWidth = 3; 

    context.beginPath(); 
    context.moveTo(1, 9); 
    context.lineTo(6.5, 1); 
    context.lineTo(12, 9); 
    context.stroke(); 

    context.restore(); 
} 

**(main.css)** 

.scoreboard-item .box button.up{ 
    background: 
     -webkit-gradient(linear,left top, left bottom, 
      from(rgba(255, 255, 255, .25)), to(transparent)),  
     -webkit-canvas(chevron-up) center center no-repeat transparent; 
}

來源

2011-10-30 user1020437

嘗試編寫CSS和JavaScript文件的完整URL。

您擁有的相對路徑是讓Safari瀏覽器在本地查找文件。

來源

2011-10-30 08:25:32

HTML5 IOS WebApp畫布不從主屏幕啓動時呈現

回答

相關問題