Question

嗨我的问题是广泛的，我是所有这些移动开发的新手，但目前我正在写一个网页，用户将通过他们的应用程序连接，以查看内容（通过webview）我的问题是......所以当我将图像设置为100px×100px时，

与ipad（大屏幕）相比，iphone（小屏幕）的含义是什么？
设备是自动向上还是向下缩放？
像我这样的程序员，我怎么知道布局和元素i的'最佳'尺寸是什么？我正在创造？即我怎么知道我的元素足够小，以适应iPhone屏幕但大到足以在ipad上按比例显示？
如何指定边距...？

请帮助谢谢

Answer 1

如果要创建响应式设计，则应使用百分比

开始创建图像

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

或者您可以使用javascript确定屏幕大小并缩小图像。

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

有时像max-width / height和min-width这样的css属性非常有用。

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

Answer 2

在iPhone上，我相信默认情况下它假设视口宽度大约为800px，除非您在标题中指定视口宽度。因此，默认情况下加载的页面基本上会放大或缩小，直到页面的宽度为800px填满屏幕。这就是为什么，如果你做一个准确的“Hello world！” HTML页面并将其加载到iPhone上，它看起来非常小巧 - 因为它假设页面宽度为800px，因为你没有告诉它。我倾向于在标题中使用<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">，这使得视口宽度等于设备的宽度。拿同样的“Hello world！”你写的页面，在标题中弹出，然后在iPhone上重新加载页面，你会发现它看起来更清晰。（另外，您可能希望在自己的项目中使用这些缩放属性 - 这些属性会影响您是否可以缩放以进行缩放。）

重要的是，在带有Retina显示屏的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有一个非常好的入门，有一个很好的链接文章末尾的各种参考文献清单。 http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/

边距适用于CSS。有关它们的详细信息可以在W3Schools的网站上找到：http://www.w3schools.com/css/css_margin.asp

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

2 个答案: