OpenLayers 3 - 全屏按鈕 - 圖標在移動設備上不可見Firefox

Question

在移動設備上，OpenLayers 3 - 全屏圖標，Mozilla Firefox未顯示。

有沒有辦法解決這個問題，或者設置一個圖標來顯示在每個設備上？

感謝，

Eylul

Answer 1

$('.ol-full-screen-false').attr('title', 'Visualizza a schermo intero'); 
    $('.ol-full-screen-false').html('<img src="icons/fullscreen_s.png"/>'); 

    if (document.addEventListener) 
    { 
    document.addEventListener('webkitfullscreenchange', fullscreenHandler, false); 
    document.addEventListener('mozfullscreenchange', fullscreenHandler, false); 
    document.addEventListener('fullscreenchange', fullscreenHandler, false); 
    document.addEventListener('MSFullscreenChange', fullscreenHandler, false); 
    } 

    function fullscreenHandler() 
    { 
    if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) 
    { 
     $('.ol-full-screen-true').attr('title', 'Chiudi la visualizzione a schermo intero'); 
     $('.ol-full-screen-true').html('<img src="icons/close_s.png"/>'); 

     $('.ol-full-screen-false').attr('title', 'Visualizza a schermo intero'); 
     $('.ol-full-screen-false').html('<img src="icons/fullscreen_s.png"/>'); 
    } 
    } 

Answer 2

可以使用的ol.control.FullScreen的label和labelActive構造選項輕鬆地設置自己的圖標。

與Fontawesome

Answer 3

解決方案展開圖標：

var fspan = document.createElement('i'); 
fspan.setAttribute('class', 'fa fa-expand'); 
... 
// use it in map control definition 
new ol.control.FullScreen({ label: fspan, tipLabel: 'Fullscreen' })