Iphone 如何确定手机和平板电脑网页中html元素的大小

您好，我的问题有点广泛，我对所有这些移动开发都是新手，但目前我正在编写一个网页，用户将通过其应用程序连接以查看内容（通过webview） 我的问题是…所以当我设置一个100px乘以100px的图像时

与ipad（大屏幕）相比，iphone（小屏幕）意味着什么

设备是否自动放大或缩小

像我这样的程序员，我如何知道布局和元素i的“最佳”大小 我在创造什么？i、 e.我如何知道我的元素足够小，适合iphone屏幕 但大到可以在ipad上按比例显示吗

如何指定页边距

---

请帮助，谢谢

如果您想创建响应性设计，您应该开始使用百分比创建图像

<img alt="test" src"../test.jpg" width ="100%" height="auto">

有时css属性如最大宽度/高度和最小宽度非常有用

---

请注意，每个版本的ipad和每个iphone都有不同的屏幕大小，因此您必须考虑更灵活的响应设计。

在iphone上，我相信默认情况下，它假定视口宽度约为800px，除非您在标题中指定视口宽度。因此，默认情况下加载页面时，页面基本上会放大或缩小，直到页面宽度800px填满屏幕。这就是为什么，如果你制作一个赤裸裸的“Hello world！”HTML页面并将其加载到iPhone上，它看起来非常微小，因为它假设页面宽度为800px，因为你没有告诉它。我倾向于在标题中使用

，这使得视口宽度等于设备的宽度。拿你写的“Hello world！”页面，在标题中弹出，然后将页面重新加载到iPhone上，你会看到它看起来更清晰。（此外，您可能希望在自己的项目上使用这些缩放特性，这些特性会影响您是否可以通过收缩来缩放。）

重要的是，在带有视网膜显示器的iPhone和iPod上，它们的行为就像是非视网膜显示器一样，因此没有任何额外的内容来为它们的屏幕格式化您的站点。因此，如果你在你的页面上放一个100x100px的图像，iphone和ipod将以100像素乘以100像素的方式显示它；在视网膜显示器上，它的大小和在非视网膜显示器上一样，所以在视网膜显示器上，200个实际像素乘以200个实际像素。（希望我的数学是对的，已经晚了。：P）

在iPad上，这几乎是一样的。1024x768是屏幕大小，因此页面上的100x100px图像将占用100个实际像素乘以100个实际像素。我的理解是（我还没有亲自验证）新iPad上的视网膜显示器的工作原理与iPhone/iPod上的视网膜显示器类似，因此在这些设备上，你的100x100px图像将占据200个实际像素乘以200个实际像素，由于像素密度的增加，基本上看起来就像是在非视网膜显示器上的尺寸。（如果您使用该元标记或类似标记）

我倾向于明智地使用CSS中的媒体查询来根据不同的屏幕大小调整版面中所有内容的大小。您甚至可以使用它为特定屏幕大小范围的特定大小的图像提供服务。这对于移动设备尤其有用，因为您可以为具有较小视口的浏览器提供较低分辨率的图像。（另一个颇受争议的特性是，使用

display:none

CSS属性可以在特定的显示尺寸下隐藏东西。）这种方法被称为“响应式设计”，ThinkVitamin有一本非常好的入门书，在文章末尾有一个很好的各种参考链接列表

---

在CSS中应用边距。在W3Schools的网站上可以找到关于它们的详细信息：

谢谢你，先生。虽然我只能接受一个答案，但我还是投票支持了你的答案。我会尝试一下的。谢谢。视口就是它听起来的样子：它是显示页面的浏览器的一部分。拿走所有的浏览器浏览器浏览器，地址栏，标签，滚动条等等-这就是你剩下的：视口。谢谢！所以它只是你可以查看的部分…明白了…所以它可以比实际生成的内容更短

if($(this).width() > $(this).height()) { 
 $(this).css('width',MaxPreviewDimension+'px');
 $(this).css('height','auto');
} else {
 $(this).css('height',MaxPreviewDimension+'px');
 $(this).css('width','auto');
}