Angularjs directive 什么调试工具来测试手机上的图像加载？

我目前正在编写一个网站加载大量的图像

我使用Bootstrap实现响应性、角度和javascript

正如您在这里看到的：www.carteldelart.com/article/messager，其他文章引用了我使用指令加载的缩略图图像，该指令使用以下代码绘制图像：

app.directive("messager", function(){
    return function(scope, element){
        angular.element(document).ready(function(){
            // on récupère l'élément
            var myUrl = "myUrl";
            var thumbnail_canvas = document.createElement('canvas');
            thumbnail_canvas.width = 125;
            thumbnail_canvas.height = 125;

            var imageTmp = new Image();
            imageTmp.crossOrigin = "Anonymous";

            imageTmp.onload = function(){
                thumbnail_canvas.getContext('2d').drawImage(imageTmp, 6, 0, 794, 794, 0, 0, 125, 125);
                document.getElementById("messager").style.backgroundImage = "url("+thumbnail_canvas.toDataURL()+")";
            }
            imageTmp.src = myUrl;
        });
    }
});

页面和图像加载良好，chrome测试工具似乎在手机上运行良好

但是，当我在实际手机上加载页面时，加载的图像的大小对于某些图像来说并不合适

我想在我的手机上打电话。你知道这方面的工具吗

---

您是否经历过这种行为？

问题的两个方面：

iOS的调试工具。 在iOS设备上正确显示图像。 一,。调试工具

从xcode打开iOS模拟器。在safari上，加载要测试的网页。 从safari的“开发”菜单中，单击iOS模拟器>刚刚加载的页面。 从iOS模拟器重新加载网页。 网页运行后，返回safari获取日志

二,。在iOS设备上正确显示图像

一些缩小的图像在垂直方向上的比例与问题中的比例不符。这是由于safari撞击设备的限制，devicePixelRatio>1

解决方案是检测图像内部的垂直挤压参数，用不同的垂直挤压参数重新绘制图像

问题的解决方案是在加载图像时嵌入stomita ios图像百万像素库：