1

演示在这里

我在 enquire.js 中使用了一系列基于高度的媒体查询来“缩放”图片。当你快速增加浏览器的高度时，图片和页脚之间会出现很大的差距。如果你慢慢增加高度，没有很大的差距。

这是错误的： 错误的。 当身高快速增加时发​​生

这是对的： 正确 - 当高度缓慢增加时发生

在控制台中，您可以看到当间隙发生时，多个不匹配项都在相同的浏览器高度触发。这是为什么？

我的实现有什么问题吗？我可以使用 enquire.js 以某种方式覆盖此行为吗？

我有一些小的查询限制。当我在查询之间使用更大的间隙时，这个问题就没有发生。理想情况下，我想保留这些小的查询限制。这是我的代码：

CatZoomHelper = {

  meowZooms: [
    1.70
    1.60
    1.51
    1.41
    1.35
    1.30
    1.25
    1.20
    1.15
    1.10
    1.05
    1
    0.95
    0.90
    0.89
    0.87
    0.83
    0.79
    0.75
    0.72
    0.65
  ]

  registerMediaQueries: (handler) ->
    enquire.register("screen and (min-height: 1220px)", handler(1.70))
    enquire.register("screen and (min-height: 1136px)", handler(1.60))

    enquire.register("screen and (max-height: 1135px)", handler(1.51))
    enquire.register("screen and (max-height: 1070px)", handler(1.41))
    enquire.register("screen and (max-height: 1010px)", handler(1.35))
    enquire.register("screen and (max-height:  989px)", handler(1.30))
    enquire.register("screen and (max-height:  940px)", handler(1.25))
    enquire.register("screen and (max-height:  925px)", handler(1.20))
    enquire.register("screen and (max-height:  875px)", handler(1.15))
    enquire.register("screen and (max-height:  850px)", handler(1.10))
    enquire.register("screen and (max-height:  830px)", handler(1.05))
    enquire.register("screen and (max-height:  790px)", handler( 1.00))
    enquire.register("screen and (max-height:  745px)", handler(  .95))
    enquire.register("screen and (max-height:  725px)", handler( .90))
    enquire.register("screen and (max-height:  685px)", handler( .89))
    enquire.register("screen and (max-height:  618px)", handler( .83))
    enquire.register("screen and (max-height:  590px)", handler( .79))
    enquire.register("screen and (max-height:  570px)", handler( .75))
    enquire.register("screen and (max-height:  550px)", handler( .72))
    enquire.register("screen and (max-height:  520px)", handler( .65))
}

handler = (zoom) ->
  zoom: zoom

  MAX_ZOOM: 1.7

  setup: ->

  zooms: CatZoomHelper.meowZooms

  match: ->

    this.zoomIndex = this.zooms.indexOf(this.zoom)
    if this.zoomIndex is -1
      this.zoomIndex = this.zooms[7]
      console.error 'zoomIndex is off'   
    console.log 'MATCH: zoom' + this.zoom + 'window height: ' + window.innerHeight

    $('img').css("height",(689*this.zoom)+"px")

  unmatch: ->
    unmatchZoom;
    if this.zoom is this.MAX_ZOOM
      unmatchZoom = this.zooms[this.zoomIndex + 1]
    else
      unmatchZoom = this.zooms[this.zoomIndex - 1]

    $('img').css("height",(689*unmatchZoom)+"px")

    console.log "UNMATCH from zoom " + this.zoom + "TO " + unmatchZoom + 'window height: ' + window.innerHeight

CatZoomHelper.registerMediaQueries(handler)
4

1 回答 1

0

我的解决方法是

  • 使用更具体的媒体查询，因此在缩小和增加浏览器窗口大小时不会有不同的行为。
  • 完全摆脱 unmatch 功能。（符合 unmatch 是一种清理功能而不是 match 的反面的哲学）
  • 以不同的顺序注册媒体查询。

我现在的注册顺序是：

  registerMediaQueries: (handler) ->

    enquire.register("screen and (max-height:  520px)", handler(.65));
    enquire.register("screen and (max-height:  550px) and (min-height:  521px)", handler(.72));
    enquire.register("screen and (max-height:  570px) and (min-height:  551px)", handler(.75));
    enquire.register("screen and (max-height:  590px) and (min-height:  571px)", handler(.79));
    enquire.register("screen and (max-height:  618px) and (min-height:  591px)", handler(.83));
    enquire.register("screen and (max-height:  685px) and (min-height:  619px)", handler(.89));
    enquire.register("screen and (max-height:  725px) and (min-height:  686px)", handler(.90));
    enquire.register("screen and (max-height:  745px) and (min-height:  726px)", handler(.95));
    enquire.register("screen and (max-height:  790px) and (min-height:  746px)", handler(1.00));
    enquire.register("screen and (max-height:  830px) and (min-height:  791px)", handler(1.05));
    enquire.register("screen and (max-height:  850px) and (min-height:  831px)", handler(1.10));
    enquire.register("screen and (max-height:  875px) and (min-height:  851px)", handler(1.15));
    enquire.register("screen and (max-height:  925px) and (min-height:  876px)", handler(1.20));
    enquire.register("screen and (max-height:  940px) and (min-height:  926px)", handler(1.25));
    enquire.register("screen and (max-height:  989px) and (min-height:  941px)", handler(1.30));
    enquire.register("screen and (max-height: 1010px) and (min-height:  990px)", handler(1.35));
    enquire.register("screen and (max-height: 1070px) and (min-height:  1011px)", handler(1.41));
    enquire.register("screen and (max-height: 1135px) and (min-height:  1071px)", handler(1.51));
    enquire.register("screen and (max-height: 1220px) and (min-height:  1136px)", handler(1.60));
    enquire.register("screen and (min-height: 1221px)", handler(1.70));

解决方案演示在这里。

enquire.js 项目的问题#80、#38 和#29有助于对此有所了解。

于 2014-07-17T21:28:37.880 回答