Search code examples
javascripttabletpepper

Is there a fix for over-scaled graphics on the Pepper 1.8 tablet?


With the new pepper 1.8 tablet, graphics are cropped because images are being scaled wrongly. Can I correct this locally or do the individual app-developers have to fix their apps for this?

Aside from augmenting the scripts manually:

$(function() {
   viewport = document.querySelector("meta[name=viewport]");
   if (viewport != null) {
     var legacyWidth = 1280;
     var windowWidth = window.screen.width;
     var scale = (windowWidth/legacyWidth).toFixed(3);
     init_str = "initial-scale=".concat(scale.toString());
     min_str = "minimum-scale=".concat(scale.toString());
     max_str = "maximum-scale=".concat(scale.toString());
     viewport.setAttribute("content", init_str.concat(",").concat(min_str).concat(",").concat(max_‌​str));
     }
})

Solution

  • There is in fact a big problem on the tablet scale. The first tablet on pepper displays a screen of 1708*1067 but the size of the tablet was 1280*800. Now, the new tablet display 1280*800 the same size of the tablet screen. Good News ! If you want to correct your old code and display your web page on the new tablet you need to change the meta in the head of your html.

    You can change with this :

    <meta content='width=1280, user-scalable=0' name='viewport' />
    

    or this (dirty method, use the first one) :

    <meta content='width=1708, user-scalable=0' name='viewport' />
    

    I hope that answer is helping you !