testing webdesign on mobile phone EDGE

52 Views Asked by At

I am trying to run an image gallery viewer. It currently works as expected in Google Chrome.

I have moved it to a windows phone to test the mobile Edge browser. The HTML, CSS and JavaScript all appear to be functioning but the img tags appear to be having some problems and aren't loading.

I have browsed the official Microsoft Forums regarding Edge etc. and can't find anything related to this issue.

Then simplified the code, and gives same error, that img tags dont show the actual img.

<html>
    <head></head>
    <body>
        <img src='p0.jpg'>
        <p></p>
        <script>
            document.querySelector('p').textContent = document.querySelector('img').src
        </script>
    </body>
</html>

When I view it in the browser, I see a small "broken image" icon in the far left corner, under: file:///C:/Data/Users/Public/Documents/Gallery/pictures/p0.jpg

How do I show it in local (mobile) reference? Is there a problem with the image file? And how should I test websites for overall user experience as though I was a mobile viewer?

1

There are 1 best solutions below

0
Horkrine On

After some extensive testing myself trying to get the image to fail on load, I can't yet find a problem with it. Because of my lack of results, I have a feeling that the only possible problem would be that your image is either not copied over either, or that you're placing it in the wrong directory. It's often best practise to have a img folder to store all of your images in, and then you can move the entire file across. All I can recommend is that your image file is in the correct location that you're referencing (in this case, the same folder as your HTML file).

Another potential solution would be to try referencing images that are hosted online (do a Google search for something and then copy paste the full URL). Make sure it works on Desktop first and then try it on mobile. If it works, great - your problem is related to your own hosted image file / location. If it doesn't work, it may be worth delving slightly deeper and figuring out what's wrong with the device / browser.

Sorry this isn't a very useful answer, but I hope it helps you in some way