Question

使用zoom: 0.5;时，图片在不在<a>标记内时会以0.5x大小呈现，但在<a>标记内时会以1x大小呈现。

这发生在iOS 8 GM（Xcode 6 GM的iPhone 5模拟器和iPad mini）上。

iOS 7.1.2（iPhone 5）和iOS 7.0（Xcode 6 GM的iPhone 5模拟器）没有出现这种情况。

以下是一个示例：https://dl.dropboxusercontent.com/u/379843/ios8csszoom/test.html

<!DOCTYPE html>
<html>
    <body>
        <img src="star-on@2x.png" style="border: 1px solid blue; zoom: 0.5;"/>

        <a href="#">
            <img src="star-on@2x.png" style="border: 1px solid blue; zoom: 0.5;"/>
        </a>

        <hr>

        <img src="star-on@2x.png" style="border: 1px solid blue; -webkit-transform: scale(0.5);"/>

        <a href="#">
            <img src="star-on@2x.png" style="border: 1px solid blue; -webkit-transform: scale(0.5);"/>
        </a>
    </body>
</html>

-webkit-transform在iOS 8上正常运行，但我并不感兴趣。想要使用它，因为即使图像以0.5x大小呈现，<img>标记占用的空间也是1x大小。

有任何解决方法吗？

Answer 1

虽然不理想，但这就是我应对这个问题的方法：

将锚点替换为另一个元素（div或span取决于块/内联）
为每个元素指定一个共享类名称
保留href，或者使用href
在较高级别上，让事件侦听器绑定到具有您的类名称的所有元素
事件侦听器读取href，然后触发适合您框架的路由/控制器逻辑

示例：http://jsfiddle.net/z5crh05a/

$(".fauxLink").on("click", function(e) {

        var href = $(e.currentTarget).attr("href");

        e.preventDefault();
        e.stopPropagation();            

        // navigation logic here
        alert("Navigate to: "+href);

    });

});

希望Safari的问题在未来的iOS更新中得到修复。

Answer 2

默认情况下，Safari和MobileSafari上的-webkit-transform有一个原点“center center”，这意味着父容器的大小与未缩放的大小相同。

使用以下方法将其设置为“左上角”进行调整：

-webkit-transform-origin 0 0;

然后整个解决方案（使用IE9 +，FF，Chrome和Safari / MobileSafari支持）：

        transform: scale(0.5);
    -ms-transform: scale(0.5);
   -mos-transform: scale(0.5);
-webkit-transform: scale(0.5);
        transform-origin: 0 0;
    -ms-transform-origin: 0 0;
   -mos-transform-origin: 0 0;
-webkit-transform-origin: 0 0;

Answer 3

我用缩放比例转换这些图片。

-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);

这也适用于ios但你必须在那之后重新定位你的照片！

Answer 4

我找到了一种解决方法，但只能与webapp框架一起使用。我正在使用CakePHP，并使用辅助方法输出所有img标签，因此我重写了该方法，以便输出width和height属性，并使用css zoom退出。

我使用GD的getimagesize来获得宽度和高度。 http://php.net/manual/ja/function.getimagesize.php

Answer 5

您可以使用一点点javascript调整图片大小，而不是更改标记。

这是我目前在WordPress博客上使用的工作片段（使用jQuery）：

var dmblog  = {

    // [TRUNCATED]

    // ! dmblog.imgZoomResize
    imgZoomResize        : function(element) {
        var zoom = element.css('zoom');
        element.width(element[0].naturalWidth*zoom);
        element.height(element[0].naturalHeight*zoom);
    },

    // ! dmblog.retinaImagesResize
    retinaImagesResize  : function() {
        $('.post .entry-content img, .comment .comment-content img').each(function(){
            dmblog.imgZoomResize($(this));
            // set a handler on the resize event to resize the retina images
            var $w          = $(window),
                namespace   = $(this)[0].id.replace('#','.'),
                element     = $(this),
                handler     = function() {
                    dmblog.imgZoomResize(element);
                };
            $w.bind('resize'+namespace, handler);
        });
    }
};

// [TRUNCATED]

// ! for single posts, load some scripts
if ($('body').hasClass('single'))
{
    // [TRUNCATED]

    // resize retina images
    dmblog.retinaImagesResize();
}

使用此解决方法，无需更改css，锚标记或任何标记，只需添加一些javascript即可调整图像大小。

我正在使用CSS媒体查询在大屏幕上将CSS缩放设置为1，在较小的屏幕上设置为0.5。即使缩放值不再起作用，它仍然在jQuery中报告为0.5。由于它是一个响应式设计，我在窗口调整大小事件上添加了一个处理程序，以便在更改缩放值时自动调整图像的大小/向下（响应CSS媒体查询）。

如果您没有使用媒体查询来响应性地更改CSS缩放值，那么您需要的javascript数量（没有处理程序）要少得多。

CSS缩放对<a>, in iOS 8 Mobile Safari</a>中的<img/>无效

5 个答案: