在Web开发中处理多屏幕分辨率和方面比率的策略

时间:2022-08-27 10:20:20

Back in the day, 800 x 600 was the screen resolution to design for - and maybe 640 x 480. Then along came 1024 x 768, etc, etc, etc.

在当天,800 x 600是设计的屏幕分辨率 - 也许640 x 480.然后沿着1024 x 768等等,等等。

But then it gets worse: now we have not only different resolutions but also different aspect ratios.

但后来情况变得更糟:现在我们不仅有不同的分辨率,还有不同的宽高比。

What strategies do people use to accommodate today's ever-expanding range of screen sizes and aspect ratios?

人们使用什么策略来适应当今不断扩大的屏幕尺寸和宽高比范围?

(BTW - I was only thinking about laptop / desktop hardware, but of course there's smart-phones and tablets to consider too.)

(顺便说一句 - 我只考虑笔记本电脑/台式机硬件,当然也有智能手机和平板电脑也要考虑。)

6 个解决方案

#1


31  

I know this would be a somewhat controversial opinion, but I'd say it anyway: Don't

我知道这是一个有点争议的意见,但无论如何我都会说:不要

Don't design for multiple screen sizes or aspect ratios. There are of course a few exceptions: Heavy web applications like webmail clients can definitely do with more screen real estate, and are probably flexible enough to accommodate a large range of screen sizes anyway. Mobile versions of said website, with a more flexible design to accommodate the incredible spectrum of mobile screen sizes can help too for sites with high mobile volumes. However, if you stick to the so called 'desktop web', then I think we can say that 95% of the time there are more important things to care about than screen sizes, resolution and aspect ratio.

不要设计多种屏幕尺寸或宽高比。当然有一些例外:像Webmail客户端这样的重型Web应用程序肯定可以用更多的屏幕空间,并且可能足够灵活,以适应各种各样的屏幕尺寸。所述网站的移动版本具有更灵活的设计以适应不可思议的移动屏幕尺寸,对于具有高移动量的网站也是有帮助的。但是,如果你坚持使用所谓的“桌面网络”,那么我认为我们可以说95%的时间比屏幕尺寸,分辨率和宽高比更值得关注。

First off, lets tackle the easy one. I don't really understand why you would care so much for aspect ratio - it isn't like we care that much for the 'below the fold' nonsense anymore, do we? The web is a vertical medium - scrolling will always have a place in websites. Having everything above the magical 600px line is just stupid.

首先,让我们轻松解决这个问题。我真的不明白为什么你会如此关心纵横比 - 这不再是我们对“低于折叠”废话的关注,我们呢?网络是一个垂直媒介 - 滚动将始终在网站中占有一席之地。拥有神奇的600px线以上的所有东西都是愚蠢的。

Next, screen resolution/size: Again, I find it difficult to defend.

接下来,屏幕分辨率/大小:再次,我发现很难防守。

Users with large screens do not usually maximize their browser windows, because they find that most website do not take advantage of them. While the web adjust to the user, the user also adjust to the web. Although you could argue that this is a chicken and egg problem, the fact remains that website are usually designed for the lowest common denominator. I'm not defending this position, but rather, pointing it out as the current prevailing trend in the industry.

具有大屏幕的用户通常不会最大化他们的浏览器窗口,因为他们发现大多数网站没有利用它们。当网络适应用户时,用户也适应网络。虽然你可能会认为这是一个鸡和蛋的问题,但事实仍然是网站通常是为最低的共同点而设计的。我不是在捍卫这个立场,而是指出它是当前行业的主流趋势。

There are certain things that simply won't work with resolution that are too high or too low. There is, for example, a small range of widths that allow people to read comfortably on screen. Any longer and the amount of movement for the eye to the next line would be annoying. Too low and the text would appear cramped. The fact that the web was designed to be resolution neutral means that paradoxically not many provisions has been made for those who wish to build fluid layouts. min-height and max-height would help, of course, but the wider the range, the more difficulties you will face. Things like orphaned elements, displaced images, backgrounds that run out, etc. are unavoidable for truly flexible sites built with today's technology.

某些事情根本无法解决太高或太低的分辨率。例如,有一小部分宽度允许人们在屏幕上舒适地阅读。任何更长的时间以及眼睛到下一行的移动量都会很烦人。太低,文字显得狭窄。网络设计为分辨率中立的事实意味着,对于那些希望建立流畅布局的人来说,矛盾的是没有多少条款。当然,最小高度和最大高度会有所帮助,但范围越宽,您将面临的困难就越多。孤立元素,*的图像,耗尽的背景等等,对于使用当今技术构建的真正灵活的网站来说是不可避免的。

So my opinion is that the simplest method for dealing with multiple resolutions is to ignore it altogether - with today's technology there are not many options anyway - and design for the lowest common denominator.

所以我的观点是,处理多种分辨率的最简单的方法是完全忽略它 - 使用今天的技术,无论如何都没有多少选项 - 并设计最低的公分母。

#2


17  

Watch out for high DPI settings

注意高DPI设置

I think one of the most undiscussed issues facing front-end web development today is testing on high DPI systems. Everyone has learned to test and test and test on different browsers but designers/developers have not caught on to testing on different DPI settings.

我认为今天前端Web开发面临的最未讨论的问题之一是在高DPI系统上进行测试。每个人都学会了在不同的浏览器上进行测试和测试,但设计人员/开发人员还没有开始测试不同的DPI设置。

High (or even low, for that matter) DPI settings break designs when fonts are scaled but images are not (which can happen), can cause images to look fuzzy/blurry, and absolutely positioned objects may not appear in the desired location (which would be devastating for CSS menus.) If nothing else, test your images at high DPI and re-render them as necessary.

高(甚至低),DPI设置在缩放字体时会破坏设计但图像不会(可能发生),可能导致图像模糊/模糊,绝对定位的对象可能不会出现在所需的位置(对CSS菜单来说是毁灭性的。)如果没有别的,请在高DPI下测试你的图像并根据需要重新渲染它们。

This has never really been an issue until recently with the release of Windows 7 and people buying computers with high resolution monitors. First off, Windows 7 uses 96DPI as default (which is different from the rest of the computing world that has been using 72DPI as the standard. Moreover, Windows 7 will automatically adjust DPI settings and I have seen people with DPI of 150% of normal (96 DPI in Windows).

直到最近,随着Windows 7的发布以及人们购买高分辨率显示器的计算机,这一直是一个问题。首先,Windows 7默认使用96DPI(这与使用72DPI作为标准的其他计算世界不同。此外,Windows 7将自动调整DPI设置,我看到DPI为正常值150%的人(Windows中96 DPI)。

Here's a great link discussing this issue in more details: http://webkit.org/blog/55/high-dpi-web-sites/

这是一个很好的链接,可以更详细地讨论这个问题:http://webkit.org/blog/55/high-dpi-web-sites/

A great cross-browser website designed with web standards is the goal but don't forget about DPI testing.

一个伟大的跨浏览器网站设计与Web标准是目标,但不要忘记DPI测试。

#3


12  

Well, trying to keep the answer not-too-long, this is what I do.

好吧,试着保持答案不要太久,这就是我的意思。

(A) Always start from the most likely used ratio/resolution

(A)始终从最可能使用的比率/分辨率开始

If your average joe is going to be on a modern laptop or a desktop machine he likely has AT LEAST 1024x768 (refs: w3schools elykinnovation), that gives you roughly a usable 960px width (you might want to check the 960grid system - there are a hell lot of new framework since I first wrote this). If you users are more likely to start with a mobile device or a tablet, thing about them first. If it's 50%-50%, it's usually better to start from small and then grow up, eg. Rock Hammer or Foundation

如果你的平均乔将在现代笔记本电脑或台式机上,他可能至少有1024x768(参考:w3schools elykinnovation),这可以给你大约一个可用的960px宽度(你可能想检查960grid系统 - 有一个自从我第一次写这篇文章以来,很多新的框架。如果您的用户更有可能从移动设备或平板电脑开始,那么首先要了解它们。如果它是50%-50%,通常最好从小开始然后长大,例如。摇滚锤或基金会

(B) Layout: fluid or not?

(B)布局:流畅与否?

If your website could benefit from a larger width, pick a fluid design starting from this resolution. Be careful that the human eye does not like to read text over long lines, so do not abuse of fluid design; often sticking to 960px with large margins is acceptable. You might want to add (javascript) some additional side-menus if you really have a lot more space. But design your website to work without JS as much as possible.

如果您的网站可以从更大的宽度中受益,请从此分辨率开始选择流畅的设计。小心人眼不喜欢长线阅读文字,所以不要滥用流体设计;经常坚持960px,利润率很高是可以接受的。如果你真的有更多的空间,你可能想要添加(javascript)一些额外的侧面菜单。但是设计你的网站尽可能没有JS工作。

(C) Other resolutions

(C)其他决议

Finally it's time to check that with least used resolutions things are still acceptable.

最后是时候检查最少使用的分辨率仍然可以接受。

(D) Other devices, ratios and stuff

(D)其他装置,比率和东西

There are not many options for different ratios; it often means you are running on a mobile, ipad, AAA or similar device.

不同比率的选择并不多;它通常意味着您在移动设备,ipad,AAA或类似设备上运行。

My advise is to ... design for those devices specifically.

我的建议是......专门为这些设备设计。

While writing your HTML keep in mind what you are going to need and remember to do HTML by semantic and not for design. Use properly HTML5 semantic tags if you can. Avoid < bold > or similar tags, and properly use tags and classes that you are going to style with CSS instead.

在编写HTML时,请记住您将需要的内容,并记住通过语义而不是设计来执行HTML。如果可以,请使用正确的HTML5语义标记。避免使用 或类似的标记,并正确使用要用CSS设置样式的标记和类。

Use a framework!

使用框架!

But you still can make a few different designs for very different devices. You don't have to do everything responsive /in the same design/.

但是你仍然可以为不同的设备制作一些不同的设计。您无需在同一设计中做任何响应/ /。

There are several ways to serve a different CSS depending on the client; you can do it:

根据客户端的不同,有几种方法可以提供不同的CSS;你能行的:

  1. server side, checking the browser in the HTTP heading coming from the client, either with your web server or your dynamic scripting environment - be it python/django, php, or whatever else
  2. 服务器端,使用您的Web服务器或动态脚本环境检查来自客户端的HTTP标题中的浏览器 - 无论是python / django,php还是其他任何其他内容
  3. javascript (you can easily get the window size)
  4. javascript(你可以很容易地获得窗口大小)
  5. html - in particular with some specific devices such as iphone
  6. HTML - 特别是某些特定的设备,如iPhone

You can easily produce a generic design for small (eg. mobile) devices by following some simple rules: 1. fluid layout capable of fitting in very small widths 2. compact header/footers not too waste too much space 3. few, clear contents per 'page' 4. avoid :over effects as they won't work on touch devices!!!

您可以通过以下一些简单的规则轻松地为小型(例如移动)设备生成通用设计:1。流体布局能够适应非常小的宽度2.紧凑的页眉/页脚不会太浪费太多空间3.很少,内容清晰每页'4.避免:过度效果,因为它们不适用于触摸设备!

If you want to go further, you have to check individual devices customizations; an example is the iphone viewport, see the apple ref library.

如果您想更进一步,您必须检查单个设备自定义;一个例子是iphone视口,请参阅apple ref库。

This is just to get you started. Experience and specific needs will drive the rest!

这只是为了让你入门。经验和具体需求将推动其余的!

#4


5  

Your site can't work perfectly for every display. Even if you had enough hours in the day (or should I say year/decade) to design for every possible display, you'd have to do it over every time a new device comes out.

您的网站无法完美地适用于每个显示器。即使你在一天中有足够的时间(或者我应该说年/十年)来设计每一个可能的显示器,你每次出现新设备时都必须这样做。

In my development, I still religiously try to avoid horizontal scrolling, and that isn't too hard with floating divs / variable-width divs. But beyond that, we really are at the "there's an app for that" cross-roads, where you need a specially designed display for specific devices.

在我的开发中,我仍然虔诚地试图避免水平滚动,这对浮动的div / variable-width div来说并不太难。但除此之外,我们真正处于“那里有一个应用程序”的十字路口,你需要一个专门为特定设备设计的显示器。

One strategy I use is to reduce dependence on a single display -- a customer probably doesn't need to see your entire web page to do what they came to do. You can parse-out functionality to smaller/simpler web pages that scale better on differently-sized devices.

我使用的一个策略是减少对单个显示器的依赖 - 客户可能不需要看到您的整个网页来执行他们要做的事情。您可以将功能解析为更小/更简单的网页,这些网页可以在不同大小的设备上进行更好的扩展。

At work, I have a little more "power", as it were -- I can develop internal web apps that are "designed to run on...some specific browser, some specific display setting, etc. -- use other configurations at your own risk". This, only after getting the managers to agree that spending an extra week in development (and even more in upgrades / future maintenance) just to placate that one vegetarian at the other end of campus who refuses to use IE really isn't worth the cost. In that case, we need another Timmy, not a more flexible web app that can look good on his favorite non-IE browser.

在工作中,我有一点“力量”,因为它是 - 我可以开发内部网络应用程序“设计为运行...某些特定的浏览器,一些特定的显示设置等 - 在其他配置使用你自己的风险“。这只是在让管理人员同意花费额外一周的开发(甚至更多的升级/未来维护)之后,只是为了安抚在校园另一端拒绝使用IE的一个素食者真的不值得这么做。在这种情况下,我们需要另一个Timmy,而不是一个更灵活的网络应用程序,可以在他最喜欢的非IE浏览器上看起来很好。

#5


4  

This is a common but complex question, which unfortunately does not have a single best solution. It all depends on the kind of content that you have. You can use a fluid layout, or design your site differently for different resolutions (see http://www.maxdesign.com.au/articles/resolution/). For an example of a fluid design, check this out - http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign

这是一个常见但复杂的问题,遗憾的是没有一个最佳解决方案。这完全取决于您拥有的内容类型。您可以使用流体布局,或针对不同的分辨率设计不同的网站(请参阅http://www.maxdesign.com.au/articles/resolution/)。有关流体设计的示例,请查看此信息 - http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign

#6


3  

I think that responsive web design is the answer to your question. Have a look at these examples and techniques...Responsive Web Design

我认为响应式网页设计是您问题的答案。看看这些示例和技术......响应式网页设计

#1


31  

I know this would be a somewhat controversial opinion, but I'd say it anyway: Don't

我知道这是一个有点争议的意见,但无论如何我都会说:不要

Don't design for multiple screen sizes or aspect ratios. There are of course a few exceptions: Heavy web applications like webmail clients can definitely do with more screen real estate, and are probably flexible enough to accommodate a large range of screen sizes anyway. Mobile versions of said website, with a more flexible design to accommodate the incredible spectrum of mobile screen sizes can help too for sites with high mobile volumes. However, if you stick to the so called 'desktop web', then I think we can say that 95% of the time there are more important things to care about than screen sizes, resolution and aspect ratio.

不要设计多种屏幕尺寸或宽高比。当然有一些例外:像Webmail客户端这样的重型Web应用程序肯定可以用更多的屏幕空间,并且可能足够灵活,以适应各种各样的屏幕尺寸。所述网站的移动版本具有更灵活的设计以适应不可思议的移动屏幕尺寸,对于具有高移动量的网站也是有帮助的。但是,如果你坚持使用所谓的“桌面网络”,那么我认为我们可以说95%的时间比屏幕尺寸,分辨率和宽高比更值得关注。

First off, lets tackle the easy one. I don't really understand why you would care so much for aspect ratio - it isn't like we care that much for the 'below the fold' nonsense anymore, do we? The web is a vertical medium - scrolling will always have a place in websites. Having everything above the magical 600px line is just stupid.

首先,让我们轻松解决这个问题。我真的不明白为什么你会如此关心纵横比 - 这不再是我们对“低于折叠”废话的关注,我们呢?网络是一个垂直媒介 - 滚动将始终在网站中占有一席之地。拥有神奇的600px线以上的所有东西都是愚蠢的。

Next, screen resolution/size: Again, I find it difficult to defend.

接下来,屏幕分辨率/大小:再次,我发现很难防守。

Users with large screens do not usually maximize their browser windows, because they find that most website do not take advantage of them. While the web adjust to the user, the user also adjust to the web. Although you could argue that this is a chicken and egg problem, the fact remains that website are usually designed for the lowest common denominator. I'm not defending this position, but rather, pointing it out as the current prevailing trend in the industry.

具有大屏幕的用户通常不会最大化他们的浏览器窗口,因为他们发现大多数网站没有利用它们。当网络适应用户时,用户也适应网络。虽然你可能会认为这是一个鸡和蛋的问题,但事实仍然是网站通常是为最低的共同点而设计的。我不是在捍卫这个立场,而是指出它是当前行业的主流趋势。

There are certain things that simply won't work with resolution that are too high or too low. There is, for example, a small range of widths that allow people to read comfortably on screen. Any longer and the amount of movement for the eye to the next line would be annoying. Too low and the text would appear cramped. The fact that the web was designed to be resolution neutral means that paradoxically not many provisions has been made for those who wish to build fluid layouts. min-height and max-height would help, of course, but the wider the range, the more difficulties you will face. Things like orphaned elements, displaced images, backgrounds that run out, etc. are unavoidable for truly flexible sites built with today's technology.

某些事情根本无法解决太高或太低的分辨率。例如,有一小部分宽度允许人们在屏幕上舒适地阅读。任何更长的时间以及眼睛到下一行的移动量都会很烦人。太低,文字显得狭窄。网络设计为分辨率中立的事实意味着,对于那些希望建立流畅布局的人来说,矛盾的是没有多少条款。当然,最小高度和最大高度会有所帮助,但范围越宽,您将面临的困难就越多。孤立元素,*的图像,耗尽的背景等等,对于使用当今技术构建的真正灵活的网站来说是不可避免的。

So my opinion is that the simplest method for dealing with multiple resolutions is to ignore it altogether - with today's technology there are not many options anyway - and design for the lowest common denominator.

所以我的观点是,处理多种分辨率的最简单的方法是完全忽略它 - 使用今天的技术,无论如何都没有多少选项 - 并设计最低的公分母。

#2


17  

Watch out for high DPI settings

注意高DPI设置

I think one of the most undiscussed issues facing front-end web development today is testing on high DPI systems. Everyone has learned to test and test and test on different browsers but designers/developers have not caught on to testing on different DPI settings.

我认为今天前端Web开发面临的最未讨论的问题之一是在高DPI系统上进行测试。每个人都学会了在不同的浏览器上进行测试和测试,但设计人员/开发人员还没有开始测试不同的DPI设置。

High (or even low, for that matter) DPI settings break designs when fonts are scaled but images are not (which can happen), can cause images to look fuzzy/blurry, and absolutely positioned objects may not appear in the desired location (which would be devastating for CSS menus.) If nothing else, test your images at high DPI and re-render them as necessary.

高(甚至低),DPI设置在缩放字体时会破坏设计但图像不会(可能发生),可能导致图像模糊/模糊,绝对定位的对象可能不会出现在所需的位置(对CSS菜单来说是毁灭性的。)如果没有别的,请在高DPI下测试你的图像并根据需要重新渲染它们。

This has never really been an issue until recently with the release of Windows 7 and people buying computers with high resolution monitors. First off, Windows 7 uses 96DPI as default (which is different from the rest of the computing world that has been using 72DPI as the standard. Moreover, Windows 7 will automatically adjust DPI settings and I have seen people with DPI of 150% of normal (96 DPI in Windows).

直到最近,随着Windows 7的发布以及人们购买高分辨率显示器的计算机,这一直是一个问题。首先,Windows 7默认使用96DPI(这与使用72DPI作为标准的其他计算世界不同。此外,Windows 7将自动调整DPI设置,我看到DPI为正常值150%的人(Windows中96 DPI)。

Here's a great link discussing this issue in more details: http://webkit.org/blog/55/high-dpi-web-sites/

这是一个很好的链接,可以更详细地讨论这个问题:http://webkit.org/blog/55/high-dpi-web-sites/

A great cross-browser website designed with web standards is the goal but don't forget about DPI testing.

一个伟大的跨浏览器网站设计与Web标准是目标,但不要忘记DPI测试。

#3


12  

Well, trying to keep the answer not-too-long, this is what I do.

好吧,试着保持答案不要太久,这就是我的意思。

(A) Always start from the most likely used ratio/resolution

(A)始终从最可能使用的比率/分辨率开始

If your average joe is going to be on a modern laptop or a desktop machine he likely has AT LEAST 1024x768 (refs: w3schools elykinnovation), that gives you roughly a usable 960px width (you might want to check the 960grid system - there are a hell lot of new framework since I first wrote this). If you users are more likely to start with a mobile device or a tablet, thing about them first. If it's 50%-50%, it's usually better to start from small and then grow up, eg. Rock Hammer or Foundation

如果你的平均乔将在现代笔记本电脑或台式机上,他可能至少有1024x768(参考:w3schools elykinnovation),这可以给你大约一个可用的960px宽度(你可能想检查960grid系统 - 有一个自从我第一次写这篇文章以来,很多新的框架。如果您的用户更有可能从移动设备或平板电脑开始,那么首先要了解它们。如果它是50%-50%,通常最好从小开始然后长大,例如。摇滚锤或基金会

(B) Layout: fluid or not?

(B)布局:流畅与否?

If your website could benefit from a larger width, pick a fluid design starting from this resolution. Be careful that the human eye does not like to read text over long lines, so do not abuse of fluid design; often sticking to 960px with large margins is acceptable. You might want to add (javascript) some additional side-menus if you really have a lot more space. But design your website to work without JS as much as possible.

如果您的网站可以从更大的宽度中受益,请从此分辨率开始选择流畅的设计。小心人眼不喜欢长线阅读文字,所以不要滥用流体设计;经常坚持960px,利润率很高是可以接受的。如果你真的有更多的空间,你可能想要添加(javascript)一些额外的侧面菜单。但是设计你的网站尽可能没有JS工作。

(C) Other resolutions

(C)其他决议

Finally it's time to check that with least used resolutions things are still acceptable.

最后是时候检查最少使用的分辨率仍然可以接受。

(D) Other devices, ratios and stuff

(D)其他装置,比率和东西

There are not many options for different ratios; it often means you are running on a mobile, ipad, AAA or similar device.

不同比率的选择并不多;它通常意味着您在移动设备,ipad,AAA或类似设备上运行。

My advise is to ... design for those devices specifically.

我的建议是......专门为这些设备设计。

While writing your HTML keep in mind what you are going to need and remember to do HTML by semantic and not for design. Use properly HTML5 semantic tags if you can. Avoid < bold > or similar tags, and properly use tags and classes that you are going to style with CSS instead.

在编写HTML时,请记住您将需要的内容,并记住通过语义而不是设计来执行HTML。如果可以,请使用正确的HTML5语义标记。避免使用 或类似的标记,并正确使用要用CSS设置样式的标记和类。

Use a framework!

使用框架!

But you still can make a few different designs for very different devices. You don't have to do everything responsive /in the same design/.

但是你仍然可以为不同的设备制作一些不同的设计。您无需在同一设计中做任何响应/ /。

There are several ways to serve a different CSS depending on the client; you can do it:

根据客户端的不同,有几种方法可以提供不同的CSS;你能行的:

  1. server side, checking the browser in the HTTP heading coming from the client, either with your web server or your dynamic scripting environment - be it python/django, php, or whatever else
  2. 服务器端,使用您的Web服务器或动态脚本环境检查来自客户端的HTTP标题中的浏览器 - 无论是python / django,php还是其他任何其他内容
  3. javascript (you can easily get the window size)
  4. javascript(你可以很容易地获得窗口大小)
  5. html - in particular with some specific devices such as iphone
  6. HTML - 特别是某些特定的设备,如iPhone

You can easily produce a generic design for small (eg. mobile) devices by following some simple rules: 1. fluid layout capable of fitting in very small widths 2. compact header/footers not too waste too much space 3. few, clear contents per 'page' 4. avoid :over effects as they won't work on touch devices!!!

您可以通过以下一些简单的规则轻松地为小型(例如移动)设备生成通用设计:1。流体布局能够适应非常小的宽度2.紧凑的页眉/页脚不会太浪费太多空间3.很少,内容清晰每页'4.避免:过度效果,因为它们不适用于触摸设备!

If you want to go further, you have to check individual devices customizations; an example is the iphone viewport, see the apple ref library.

如果您想更进一步,您必须检查单个设备自定义;一个例子是iphone视口,请参阅apple ref库。

This is just to get you started. Experience and specific needs will drive the rest!

这只是为了让你入门。经验和具体需求将推动其余的!

#4


5  

Your site can't work perfectly for every display. Even if you had enough hours in the day (or should I say year/decade) to design for every possible display, you'd have to do it over every time a new device comes out.

您的网站无法完美地适用于每个显示器。即使你在一天中有足够的时间(或者我应该说年/十年)来设计每一个可能的显示器,你每次出现新设备时都必须这样做。

In my development, I still religiously try to avoid horizontal scrolling, and that isn't too hard with floating divs / variable-width divs. But beyond that, we really are at the "there's an app for that" cross-roads, where you need a specially designed display for specific devices.

在我的开发中,我仍然虔诚地试图避免水平滚动,这对浮动的div / variable-width div来说并不太难。但除此之外,我们真正处于“那里有一个应用程序”的十字路口,你需要一个专门为特定设备设计的显示器。

One strategy I use is to reduce dependence on a single display -- a customer probably doesn't need to see your entire web page to do what they came to do. You can parse-out functionality to smaller/simpler web pages that scale better on differently-sized devices.

我使用的一个策略是减少对单个显示器的依赖 - 客户可能不需要看到您的整个网页来执行他们要做的事情。您可以将功能解析为更小/更简单的网页,这些网页可以在不同大小的设备上进行更好的扩展。

At work, I have a little more "power", as it were -- I can develop internal web apps that are "designed to run on...some specific browser, some specific display setting, etc. -- use other configurations at your own risk". This, only after getting the managers to agree that spending an extra week in development (and even more in upgrades / future maintenance) just to placate that one vegetarian at the other end of campus who refuses to use IE really isn't worth the cost. In that case, we need another Timmy, not a more flexible web app that can look good on his favorite non-IE browser.

在工作中,我有一点“力量”,因为它是 - 我可以开发内部网络应用程序“设计为运行...某些特定的浏览器,一些特定的显示设置等 - 在其他配置使用你自己的风险“。这只是在让管理人员同意花费额外一周的开发(甚至更多的升级/未来维护)之后,只是为了安抚在校园另一端拒绝使用IE的一个素食者真的不值得这么做。在这种情况下,我们需要另一个Timmy,而不是一个更灵活的网络应用程序,可以在他最喜欢的非IE浏览器上看起来很好。

#5


4  

This is a common but complex question, which unfortunately does not have a single best solution. It all depends on the kind of content that you have. You can use a fluid layout, or design your site differently for different resolutions (see http://www.maxdesign.com.au/articles/resolution/). For an example of a fluid design, check this out - http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign

这是一个常见但复杂的问题,遗憾的是没有一个最佳解决方案。这完全取决于您拥有的内容类型。您可以使用流体布局,或针对不同的分辨率设计不同的网站(请参阅http://www.maxdesign.com.au/articles/resolution/)。有关流体设计的示例,请查看此信息 - http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign

#6


3  

I think that responsive web design is the answer to your question. Have a look at these examples and techniques...Responsive Web Design

我认为响应式网页设计是您问题的答案。看看这些示例和技术......响应式网页设计