网站移动版本-处理图像 [英] Web Site Mobile Version - Handling Images

问题描述

好吧，昨天我带着妻子的iPad去了奥斯汀，所以我可以向父亲展示我在他的潜艇模型上取得的进展，但是我发现10年前的聪明几乎完全毁了我在移动设备上浏览网站的能力.

我采取措施使网页本身不需要浏览器窗口滚动条进行垂直滚动，而是选择使主div滚动.这样始终可以看到页眉区域和页脚.昨天我发现，在iPad上查看时，div的滚动条根本不显示，所以我只能看到的内容是最初显示页面时显示的内容.

现在，我必须完全重新设计母版页，以允许浏览器本身允许滚动.

随着带宽上限和较小的(移动)屏幕成为常态，我不得不重新考虑网站上提供的图片.大多数都是相当大的(800像素宽)，经过压缩，我将它们减小到大约150K.对于平板电脑，我认为我可以放心地将其设置为800px宽，但是对于手机而言，这并不实际.

当网站选择缩小图片的大小时(例如width="50%")，它实际上是调整图片的大小并向客户端发送较少的数据，还是发送图片并缩小其以显示在客户端上?

Well, I went to Austin yesterday with my wife''s iPad so I could show my dad the progress I''ve been making on his submarine model, but I found out that being clever 10 years ago has almost completely ruined my ability to navigate the site on a mobile device.

I took steps to make the web page itself not require vertical scrolling with the browser window scroll bars, choosing instead to make the main div scroll instead. This keeps the header area and the footer in view at all times. I found out yesterday that when viewed on the iPad, the div''s scroll bar doesn''t display at all, so the only content I can see is the content that shows up when the page is initially displayed.

I now have to completely redesign the master page to allow the browser itself to allow scrolling.

And with bandwidth caps and smaller (mobile) screens becoming the norm, I have to rethink the pictures provided on my site. Most are fairly large (800 pixels wide), and with compression, I have them down to about 150K. For tablets, I think I can safely leave them at 800px-wide, but for phones, that''s not really practical.

When a web site species a picture to be reduced in size (for example, width="50%"), does it actually re-size the image and send less data to the client, or does it send the image and reduce it for display on the client side?

推荐答案

它发送完整图像，然后浏览器调整其大小.

使用height和width属性缩小大图像的尺寸会迫使用户下载大图像(即使页面上看起来很小)."

http://www.w3schools.com/tags/att_img_width.asp [

It sends the full image and the browser resizes it.

"Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). "

http://www.w3schools.com/tags/att_img_width.asp[^]

这篇关于网站移动版本-处理图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！