Problem with mobile testing tool

 My game looked strange when I tested it on mobile phones run by 'appetize.io'.


There was a thick border around the boards of players. And the game seemed to hang when I pressed a button.


I thought maybe Chrome was adding an outline when an 'input' element got the focus. So I tried setting 'outline: 0'. This did not fix the problem.


However, when I tested my game on mobile phones at 'browserstack.com' then everything looked fine.


I realised that maybe there was a problem at 'appetize.io'.


However, 'browserstack.com' only gives you one free minute per device.  Whereas 'appetize.io' gives you 30 free minutes a month. 'appetize.io' worked fine for tablets.


This was a few months ago. Now my game looks fine on mobiles run by 'appetize.io'.




Comments

Post a Comment

Popular posts from this blog

Giving PWA icons transparent backgrounds

Image
 I changed some of my icons to have transparent backgrounds. These were the icons mentioned in the 'manifest' files of my Progressive Web Apps (PWA). I had given the icons white backgrounds to make them clearer as recommended by the PWA tutorial on Google's 'web.dev'. But these looked strange next to other icons on a Windows desktop. I made all my web pages PWA's by adding a 'manifest' file and starting a 'do-nothing' service worker. Chrome warns that loading these service workers slows things down. There are more tips at: bbingo.xyz/techtips/
Read more

RCS 'identification marker' comes in useful

Image
 I forgot which version of my JavaScript game I 'minimised' to produce the latest version. Luckily I had put an RCS 'identification marker' in an HTML comment at the start of the code. I had used the '$Revision$' marker. RCS is the free source control system that came with my old Linux system. There are more tips at:  bbingo.xyz/techtips/
Read more

Marking up code examples

Image
 I now put code examples inside a '<pre><code>' block I was using '&nbsp;' to indent lines. I set the '<code>' to 'display:block' so I can indent it with 'margin-left'. I start the example code immediately after the '<code>' tag to avoid an extra newline. I put everything in a 'div' with contenteditable="true" and  spellcheck="false" to allow 'copy and pasting' and to remove any red 'spell-check' wavy line. I give the 'div' 'max-width:100%' and 'overflow:auto' to stop scrollbars appearing in the browser's outer window There are more tips at: [bbingo.xyz/t](http://bbingo.xyz/t) There are more tips at:  bbingo.xyz/techtips/
Read more