繁体   English   中英

响应式设计-Iphone人像与风景

Responsive design - Iphone portrait vs landscape

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

如果Iphone 5(320x568)处于纵向模式,则其宽度为320px。 当处于横向模式时,其宽度为320px,方向为横向,或者其宽度为568px,方向为横向。 我说的是CSS看到的宽度。

换句话说,此代码是否也适用于横向模式,因此在这种情况下,该网站(由#container包装)占据了整个屏幕,而不仅仅是320px?

@media (max-width: 568px) and (min-width:320) {
#container {
    max-width: 790px;
    width: 100%;
      } 
1 个回复

你要这个

人像越高,风景越宽。

@media all and (orientation:portrait) {
  /* Styles for Portrait screen */
}
@media all and (orientation:landscape) {
  /* Styles for Landscape screen */
}

http://www.hongkiat.com/blog/css-orientation-styles/

简短答案:对于具有这些尺寸的iPhone 5,您的代码将始终适用。

说明:认为min-width

此CSS适用的最小宽度(任何较低的宽度均不计算在内)

同样考虑max-width

此CSS适用的最大宽度(更高的值将不会计入)

请注意,您要应用的width:100%介于320px568px之间。 这意味着该行的max-width: 790px; 由于最大值width:100%可以返回的值为568px将永远不会执行

1 iPhone如何改变风景为人像?

我用iPhone开发了一个简单的游戏。 整个游戏处于横向模式,但记分板页面仅支持纵向模式。 我在这里检查了问题,我只发现将人像变成风景模式,但是我需要相反的答案。 有人可以帮我吗? ...

2012-11-13 06:56:44 2 1516   iphone
3 响应式设计CSS样式,可欣赏风景

我知道这听起来很愚蠢,但是我已经搜索了stackoverflow,并且讨论了大多数有关iPhone从纵向切换为横向切换时视图切换错误的问题。 这是我的问题。我已经为iPhone设计了人像视图,我手动重新定义了大多数div的宽度。 该网站现在可以在纵向视图中正常工作。 现在,我将要开发横 ...

4 iPhone锁定人像,iPad锁定风景

我正在尝试将iPhone应用程序转换为iPad。 棘手的事情是,iPhone应用程序必须锁定为纵向视图,而iPad应用程序必须锁定为横向视图。 我有点像界面构建器的菜鸟,所以有点迷路。 任何帮助是极大的赞赏。 谢谢! ...

5 iPhone人像/风景和坐标系统

我真的很想弄清楚如何处理旋转。 我在这里阅读了许多文章,但无法获得将其以正确的方式并以正确的位置添加到横向屏幕的项目。 例如,我有一个纵向视图(320x480),并在位置(0,0)创建一个大按钮。 我希望它会出现在左上角。 当我将设备顺时针旋转到横向(480x320)时,我希望坐 ...

6 android人像和风景布局设计

作为Android的新功能,为myapp创建了两个layout(layout和layout-land)文件夹。两个xml文件如下所示。 下一个景观布局 这是清单文件,在其中进行了一些修改 现在我跟随stackoverflow中的链接的文件夹目录结构 将手机从纵向倾斜到横 ...

2013-01-31 08:18:42 0 120   android
7 iPhone风景VS人像上的元素更大吗?

我正在处理iPhone的媒体查询。 我注意到,当我将手机从PORTRAIT翻转到LANDSCAPE时,一切都会变大。 例如,资产净值在PORTRAIT上更高。 不过,真正令人奇怪的是,检查员说两个方向的高度都相同:90px。 这到底是怎么回事? 具有相同高度的元素如何在不同 ...

8 iphone设备上的响应式设计

建立一个网站https://hopeful-jackson-02928a.netlify.app/并使用Google chrome工具对其进行测试。 媒体查询适用于所有设备。 我还使用了一个名为涟漪的仿真器,该仿真器可以在所有移动设备上对其进行测试。 再次工作正常。 但是,当我在实际的iphone ...

9 iPhone响应式设计不兼容

我有一个响应式页面,当通过非Apple产品查看时,该页面可以正确显示,但是一旦从iPhone进行访问,它就会完全混乱,并且我不知道是什么原因造成的。 链接到页面: http://glab.000webhostapp.com/businessCard 这是屏幕截图。 老实说,我 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM