html阻止某一个元素缩放,WebKit CSS变换:如果某些HTML元素的比例因子大于1,则缩放对Retina Mac不起作用...

示例小提琴:

http://jsfiddle.net/pmLs1cxv/5/

HTML:

CSS:

.two {

transform: scale(2);

}

我有一个单选按钮和一个复选框,我应用transform:scale(2)to.在我的Thunderbolt(非视网膜)显示器上,它们可以正确缩放到2x,如下所示:

但随后我将同一个窗口拖到我的Retina MacBook显示屏上,然后它们突然变回原始尺寸,如下所示:

我没有对窗户或窗户内做任何事情,我只是在两个显示器之间拖动窗口.每当窗口在Thunderbolt显示屏上时,控件会弹回2x模式,当窗口在Retina MacBook的显示屏上时,它们会弹回到原始大小.如何确保它们在视网膜显示器上扩展? (使用transform:scale(4)不做任何事情;视网膜显示不需要2倍的比例因子.)

注意:我在Chrome 44和Safari 8.0.7中进行了测试,并且两者都出现了这种情况,因此我的问题是WebKit.有趣的是,使用zoom:200%而不是transform:scale(2)会导致Chrome以不同的方式呈现框以绕过此问题,但这在Safari中不起作用,在Safari中它表现出与上述相同的行为.我已经在多个Retina MacBook Pro上测试了它们,它们都表现出这种行为,因此它不是我的机器本地的问题.

编辑:我修改了小提琴,包括一个< button>元素也是如此,同样的事情发生,所以这不仅限于无线电和复选框输入.

编辑2:我测试了< img>元素和它们适当缩放.因此,我不认为这是所有元素的问题,只是特定的元素,我发现它到目前为止影响单选按钮,复选框和按钮.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值