Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 450
  • Last Modified:

Adapting image size to visitor's screen resolution

Recently, the percentage of mobile browsers visiting my website has increased.  Some of my pages feature large images in a dynamic format, such as a slide show, or an auto-scrolling panorama.  I'm trying to accommodate mobile browsers (short of designing a dedicated website) by adjusting the image size of these features, based on the visitor's screen resolution. I'd appreciate some feedback regarding the performance of the page at http://mauitradewinds.com/Test/view.htm    This is supposed to redirect the browser to one of three different versions of a scrolling panorama, depending on the visitor's screen resolution.  I'd like to know if it is effective, or if there are specific improvements recommended.
0
ddantes
Asked:
ddantes
  • 6
  • 5
  • 2
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It's close except when I narrow the browser all the way to simulate the phone the text gets lost on the right.

I would suggest using media queries in your css to allow change for different sizes.   https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
0
 
Michel PlungjanIT ExpertCommented:
Your page is now quite performant on iPad.

Media queries will not work on actual images which should be detected on the server which then serves smaller images.

A quick one could be

if $(window).width()<500) document.write('<img id="pic1" src="images/viewsmall.jpg" alt=""><img id="pic2" src="images/viewsmall.jpg" alt="">');
else document.write('<img id="pic1" src="images/view.jpg" alt=""><img id="pic2" src="images/view.jpg" alt="">');
0
 
ddantesAuthor Commented:
Thank you both for your helpful comments.  

padas:  The style sheet for my pages has a min width of 500px, so that paragraphs of text don't turn into tall and narrow columns if the window is narrowed.  Do you think I should reduce that to a narrower min width, to accommodate iPhone?

mplungjan:  Regarding the code example which you offered, I'm unclear whether this is a client-side or a server-side function?   If it is client-side, can you show me how, and where, to insert it into the page at http://mauitradewinds.com/view.htm?  This is not the view.htm in the Test subfolder, but the one which is currently "live" online, and which makes reference to the view.jpg image.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Michel PlungjanIT ExpertCommented:
Just replace the 2 image tags you have now with
<script>
if ...
</script>
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Take a look at these projects http://foundation.zurb.com or http://twitter.github.io/bootstrap or http://unsemantic.com 

They are all responsive css/js libraries that can make this easier for you.  Even if you don't use them, you can get a good feel for how  they work.  Your Min width should probably be closer to 320 px https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices
0
 
ddantesAuthor Commented:
mplungjan:  Thank you. If I understood correctly, the code would look like this:

<body onload="pwset()">
<div class="nobr">
<script type="text/javascript">
if $(window).width()<500) document.write('<img id="pic1" src="images/viewsmall.jpg" alt=""><img id="pic2" src="images/viewsmall.jpg" alt="">');
else document.write('<img id="pic1" src="images/view.jpg" alt=""><img id="pic2" src="images/view.jpg" alt="">');
</script>
</div>

However, no image appears when the page is loaded.

padas: Thank you.  I'll review those articles.
0
 
Michel PlungjanIT ExpertCommented:
Did you create the viewsmall.jpg and look in the console for any errors I might have typed on my iPhone ?

Also this code relies on the jQuery framework so applies to the new plugin I suggested
0
 
ddantesAuthor Commented:
Yes and no.  I did create viewsmall.jpg, but I failed to check the console, or to invoke the new plugin.  However, the following code appears to work:

<body onload="pwset()">
<div class="nobr">
<script type="text/javascript">
if (screen.width < 500) {
document.write('<img id="pic1" src="images/viewsmall.jpg" alt=""><img id="pic2" src="images/viewsmall.jpg" alt="">');
}
else {
document.write('<img id="pic1" src="images/view.jpg" alt=""><img id="pic2" src="images/view.jpg" alt="">');
}
</script>
</div>

I don't know whether "screen.width" is equivalent to "window.width", so I'm not sure this code accomplishes the desired result.  If not, I'll try using the jQuery which you previously recommended.  Please advise.
0
 
ddantesAuthor Commented:
error consoleThe version of view.htm which we have been working with in this question uses a different javascript plugin to produce the scrolling, not jQuery.reel.  So the html code on the view.htm page is entirely different from the page which is associated with jQuery.reel.

I've attached a screenshot of the error console, which I don't know how to interpret.
0
 
Michel PlungjanIT ExpertCommented:
Which URL?
0
 
ddantesAuthor Commented:
http://mauitradewinds.com/Test/view.htm

Your code is working.  There was an "(" omitted before the "$", and I failed to reference jQuery in the <HEAD> section of the document.

Would you please give this page a test now and let me know if it's performing as you would expect?
0
 
Michel PlungjanIT ExpertCommented:
Apart from loading slow, it scrolls well on iPad and iPhone
0
 
ddantesAuthor Commented:
Thanks to all participating experts for their good advice.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now