屏幕分辨率如何影响移动 Web 应用程序的设计?

发布于 2024-10-19 18:58:23 字数 174 浏览 2 评论 0原文

我一直在做一些关于创建移动网络应用程序的研究,我已经进入了设计阶段,作为一些研究,我编制了当前一代智能手机的屏幕尺寸和分辨率的列表。

所以我们都知道,市面上有大量的手机,每种手机都有不同的屏幕尺寸,但是在设计我的移动 Web 应用程序(或两者)时,我是否应该考虑物理屏幕尺寸或分辨率?

干杯, 内华达

I have been doing some research into creating a mobile web application, I have got to the design phase and as a bit of research I have compiled a list of the current generation of smart phones their screen size and also their resolutions.

So we all know that there are a tonne of mobile phones out there each with different screen sizes, but should I be looking at physical screen size or resolution when designing my mobile web application (or both)?

Cheers,
IW

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

一杯敬自由 2024-10-26 18:58:23

设计移动网站时,物理屏幕尺寸和分辨率都很重要。

屏幕尺寸很重要,因为它将定义网站上可以放置的内容量,并定义点击区域的大小(对于触摸输入设备至关重要)。

分辨率将决定页面上可以包含的细节量,这会影响图形等内容。

关于如何使您的网站在各种设备上正常运行的一些建议:

  • 调整图形大小以适合请求您的网站的每个设备。这将确保大多数设备上的演示文稿保持一致。
  • 支持页面上元素的灵活尺寸 - 使用百分比而不是固定尺寸,并以相对尺寸指定文本尺寸。

Both physical screen size and resolution are important when designing a mobile web site.

Screen size is important because it will define how much content can be placed on the website and also define how big your hit areas can be (essential for touch input devices).

Resolution will determine the amount of detail you can have on your page, this affects things like graphics.

A few suggestions as to how you can make your website work well across a range of devices:

  • Resize graphics to fit each device that your site is requested from. This will ensure that the presentation is consistent across most devices.
  • Favor flexible sizes for elements on your page - use percentages as opposed to fixed dimensions and specify text sizes in relative sizes.
水水月牙 2024-10-26 18:58:23

当然,这对于布局 UI 组件非常重要。专为较大屏幕设计的应用程序可能最终会显示太小的字体/控制元素等,如果您只是盲目地将其缩小以适应较小的显示区域,则可能无法舒适地使用。

Of course it is very important for laying out your UI components. An app designed for a larger screen may end up showing far too tiny fonts/control elements etc which may not be comfortably usable if you just blindly scale it down for a smaller display area.

指尖上的星空 2024-10-26 18:58:23

不知道下面是否有帮助,但这就是我所做的;

我不使用图像作为 ui 元素,而是使用 css 和 html 元素
我没有以像素为单位定义字体大小,而是定义为中、小、大等
为了调整横幅或图像的大小,我主要使用 http://deviceatlas.comhttp://wurfl.sourceforge.net。如果我不介意的话,我只需创建宽度不超过 240px 的图像

您也可以查看 jQuery Mobile 等框架

Don't know if below would help but here is what i do;

I don't use images as ui elements but css and html elements
I don't define font sizes in pixels but as medium,small,large etc
For resizing banners or images I mainly use http://deviceatlas.com or http://wurfl.sourceforge.net. If I can't be bothered I simply create images that aren't wider than 240px

You could also look in to frameworks such as jQuery Mobile

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文