Page History
...
With
...
the
...
iPhone
...
4,
...
supporting
...
images
...
on
...
mobile
...
devices
...
got
...
more
...
complicated.
...
This
...
is
...
because
...
of
...
Apple's
...
"Retina
...
Display",
...
which
...
has
...
approximately
...
4x
...
as
...
many
...
pixels
...
in
...
a
...
given
...
space
...
as
...
previous
...
displays
...
(326dpi).
...
One
...
can
...
still
...
use
...
standard-resolution
...
images,
...
but
...
they
...
come
...
across
...
as
...
looking
...
blurry
...
or
...
chunky
...
for
...
users
...
accustomed
...
to
...
the
...
sharper
...
images
...
the
...
display
...
can
...
provide.
...
Since
...
then,
...
several
...
other
...
mobile
...
vendors
...
have
...
also
...
introduced
...
devices
...
with
...
high-density
...
displays.
...
Information
...
on
...
screen
...
density
...
can,
...
in
...
most
...
browsers,
...
be
...
obtained
...
using
...
javascript's
...
window.devicePixelRatio
...
property,
...
which
...
is
...
a
...
floating
...
value
...
that
...
indicates
...
how
...
much
...
a
...
regular
...
image
...
must
...
be
...
scaled
...
up
...
for
...
the
...
device's
...
display.
...
Its
...
value
...
is
...
1.0
...
for
...
older,
...
standard-resolution
...
devices,
...
but
...
2.0
...
for
...
the
...
iPhone
...
4.
...
In
...
addition,
...
...
...
...
...
...
are
...
known
...
to
...
return
...
values
...
of
...
1.5,
...
1.3,
...
and
...
0.75.
...
In
...
Texas
...
State's
...
implementation,
...
we
...
had
...
an
...
image-sizing
...
utility
...
written
...
in
...
Perl
...
that
...
would
...
accept
...
the
...
desired
...
dimensions
...
for
...
an
...
image
...
as
...
URL
...
parameters.
...
Thus,
...
we
...
had
...
a
...
method
...
that
...
would
...
wait
...
for
...
a
...
dom:loaded
...
event
...
(which
...
fires
...
after
...
the
...
DOM
...
is
...
built,
...
but
...
before
...
images
...
are
...
loaded),
...
and
...
would
...
rewrite
...
the
...
SRC
...
attribute
...
of
...
any
...
images
...
with
...
a
...
txst-multiresolution-image
...
class
...
to
...
request
...
a
...
higher
...
resolution
...
based
...
on
...
the
...
current
...
devicePixelRatio
...
:
| Code Block |
|---|
} // resize multiresolution images as needed Event.observe( document, "dom:loaded", function() { if ( window.devicePixelRatio ) { $$('.txst-multiresolution-image').each( function( item ) { var src = item.src; src.match(/width=(\d+)/); var originalWidth = RegExp.$1; src.match(/height=(\d+)/); var originalHeight = RegExp.$1; src = src.replace(/width=(\d+)/,"width=" + originalWidth * window.devicePixelRatio ); src = src.replace(/height=(\d+)/,"height=" + originalHeight * window.devicePixelRatio ); item.src = src; item.width = originalWidth; item.height = originalHeight; }); } }) {code} |
Note:
...
this
...
code
...
relies
...
on
...
the
...
Prototype
...
Javascript
...
library,
...
and
...
would
...
probably
...
need
...
to
...
be
...
tweaked
...
to
...
work
...
with
...
our
...
jQuery
...
stuff.
...
Additionally,
...
it's
...
important
...
to
...
note
...
that
...
the
...
item's
...
dimensions
...
are
...
still
...
required
...
to
...
be
...
the
...
original
...
values
...
so
...
that
...
the
...
image
...
doesn't
...
get
...
larger
...
on
...
the
...
page,
...
only
...
more
...
detailed.
...
See
...
http://www.theatreanddance.txstate.edu/
...
for
...
an
...
example
...
of
...
our
...
image
...
gallery
...
in
...
action.
...
(It
...
also
...
uses
...
swiping
...
gestures
...
to
...
scroll
...
through
...
images,
...
though
...
I
...
was
...
never
...
quite
...
happy
...
with
...
how
...
smooth
...
we
...
were
...
able
...
to
...
make
...
them.)
...
Because
...
the
...
Magnolia
...
imaging
...
library
...
relies
...
on
...
predefined
...
image
...
variations,
...
we
...
can't
...
use
...
this
...
exact
...
approach,
...
which
...
relies
...
on
...
being
...
able
...
to
...
specify
...
arbitrary
...
dimensions
...
for
...
an
...
image
...
as
...
part
...
of
...
the
...
request.
...
It
...
should
...
be
...
possible
...
to
...
adapt
...
to
...
a
...
range
...
of
...
variations
...
without
...
too
...
much
...
trouble
...
though.
Overview
Content Tools