个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我不是专业的网络开发人员，我有一个与下面类似的问题，因为我的一些页面没有缩小以适应纵向移动设备的视口(viewport)。风景似乎还不错。
Website Not Resizing Correctly on iPhone Portrait
我以前使用视口(viewport)元标记确实让网站正常工作，但自从 iOS 更新后，它全部恢复为实际网页大小。我根据此建议删除了元标记(它不是响应式网站)
http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho
有些页面可以正常工作，有些则不能。这个不成立!所有页面上的 CSS 都相同，但它们显示不同，“图像”、“工作原理”和“定价”均正常运行。其他页面在视口(viewport)外流血。有什么想法吗？
谢谢!
这是错误页面的 HTML:
<link rel="stylesheet" type="text/css" href="webfonts/MyFontsWebfontsKit.css">
<link href="source/style.css" rel="stylesheet" type="text/css" />
<meta name="description" content="FUN & SON - bespoke photography for kids" />
<title>
FUN & SON - bespoke photography for kids
</title>
</head>
<body bgcolor="#d0d0d0">
<div id="container1">
<div class="image">
<img src="images/header.png" width="1200px" height="144px" name="background"/>
<h1>
<a href="aboutus2.html">ABOUT US</a>
<br />
<a href="images.html">IMAGES</a>
<br />
<a href="howitworks.html">HOW IT WORKS</a>
<br />
<a href="pricing.html">PRICING & PRODUCTS</a>
<br />
<a href="https://funandson2016.wordpress.com/">BLOG</a>
<br />
<a href="press.html">PRESS</a>
<br />
<a href="contact.html">CONTACT US</a>
<br />
<br />
<br />
<br />
<a href="https://www.instagram.com/funandson/"><img src="images/insta.png" width="50px" height="50px" name="dot"/></a>
<a href="https://www.facebook.com/Fun-Son-Bespoke-Photographic-Service-for-Kids-354285164695429/?ref=hl"><img src="images/fb.png" width="50px" height="50px" name="dot"/></a>
</h1>
<div id="copycontainer">
<h3>
<p style="margin-left: 60px; margin-top: 75px">
Coming soon
</p>
</h3>
<br />
<br />
</div>
</div>
</body>
CSS 也很标准:
#container {
width:1200px;
}
#container1 {
width:1200px;
}
#container2 {
width: 770px;
float:left;
margin-top:95px;
margin-left:432px;
}
#copycontainer {
width: 800px;
height: auto;
float:left;
margin-top:70px;
margin-left:360px;
}
.cover a:hover {
text-shadow: 2px 2px: #ffffff;
}
.images {
float: left;
padding-left: 10px;
padding-top: 10px;
}
.image {
margin:auto;
position: relative;
width: 100%; /* for IE 6 */
}
.placeholder {
background-color: #FF0;
margin-top: 10px;
margin-right: 10px;
padding-top: 0px;
float:left;
}
h1 {
font-family: CeraStencilPRO-Light;
font-weight: normal;
font-style: normal;
color: #7e7e7e;
font-size: 22px;
line-height:40px;
position: absolute;
top: 185px;
left: 0;
margin-left: 20px;
margin-top: 60px;
width: 100%;
z-index:-20000;
}
h2 {
font-family: CeraStencilPRO-regular;
font-weight: normal;
font-style: normal;
color: #7e7e7e;
font-size: 20px;
margin-top: 35px;
}
h3 {
font-family: Helvetica;
font-weight: normal;
font-style: normal;
color: #7e7e7e;
font-size: 16px;
margin-top: 35px;
line-height: 21px;
}
h4 {
font-family: CeraStencilPRO-Light;
font-weight: normal;
font-style: normal;
color: #7e7e7e;
font-size: 22px;
line-height:40px;
position: absolute;
top: 185px;
left: 0;
margin-top: 60px;
margin-left: 20px;
width: 100%;
}
h5 {
font-family: Helvetica;
font-weight: normal;
font-style: normal;
color: #7e7e7e;
font-size: 19px;
line-height: 21px;
}
最佳答案
您应该使用 bootstrap 进行响应式网页设计。它易于学习，您可以快速创建响应式 html 页面。
包括 Bootstrap 后插入这个 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">并将 html 页面的内容包装在引导网格系统中。
初学者教程 w3schools .
关于HTML 页面无法在纵向 iPhone/iPad 上调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36857751/
25
4
0
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎是题外话，因为它缺乏足够的信息来诊断问题。 更详细地描述您的问题或include a mi
如何将我的 phonegap 应用程序的方向锁定为纵向？ 我当前的 config.xml正在使用此首选项: 但这没有什么区别，我仍然可以通过旋转我的移动测试设备来在两个方向上定位我的应用程序。 此外
我正在用Xcode 7开发一个iPhone应用程序，该应用程序只能以纵向模式打开。我的问题是我是否还需要为横向模式提供启动/启动/默认屏幕，或者以各种纵向模式提供它就足够了吗？ 最佳答案 我认为只添加
我正在试用 BluetoothChat sample ，问题是，当您在纵向/横向模式之间切换时，它会断开连接。我需要做什么才能通过该更改来维护连接和数据？ 最佳答案 几个选项: 将所有蓝牙通信位移动到
所以我仍在学习移动设备的 css/html。我有一个网站，在桌面上看起来不错。当您在移动设备上将其拉起时，菜单消失了。如果你进入景观模式，菜单就会出现。对原因有什么帮助吗？ 菜单代码。
我们的 React 应用程序有大约 10 个不同的路由，我们希望它们都可以打印。我们正在使用 css 打印媒体查询来清理样式以进行打印，并且前端有一个调用 window.print() 的按钮。单击时
我想让我的按钮为我的纵向 View 和横向 View 以不同的方式排列。我还希望能够将现在可能在我的纵向 View 中的东西添加到我的横向 View 中。我知道这是可能的原因显然是每部 iphone
我正在使用 jQuery 为交互式网站触发不同的 css 转换，例如单击时将对象 A 移动到位置 1。现在这些选项在不同的视口(viewport)上应该是不同的。 虽然在 css 中使用类很容易实现这
我正在开发一个画廊，我想根据图片方向自动旋转 View 。例如，两张照片: 1200 宽 x 800 高像素 550 宽 x 800 高像素 现在要确定哪个是肖像，我只需要检查是否高度>宽度？这是唯一
我有一个简单的幻灯片(列表项)，但结合了纵向和横向图像。我在流体网格上工作，所以一切基本上都是 100% 的。 我想知道是否有一种方法可以让所有图像保持相同的高度，但宽度保持符合它们的比例。所有图片在
我想仅在平板电脑中为我的应用程序启用屏幕方向更改，同时将手机中的布局限制为仅纵向。你是怎么做到的？ 最佳答案 无论如何，请阅读this .它应该给你一个关于如何去做的想法。 标签允许您声明您希望您的应
我正在使用 UIImagePickerController 拍摄和编辑照片。它在风景中工作正常，但在肖像中它会将图片裁剪成正方形(不允许像在风景中那样缩小图像以完全适合方形裁剪区域。有什么想法吗？ 代
根据产品要求，我必须将应用程序的方向保持为手机纵向和平板电脑横向。在调用 super.onCreate() 之前，使用以下代码为 onCreate() 回调中的每个 Activity 设置方向 pub
我的网站在 iPad 上显示不正确 - 纵向模式。它在横向模式下看起来很好，但是当我将它变成纵向模式时，我最终得到一个凌乱的网站。所有元素散布在整个站点。我怎样才能解决这个问题？请帮我。 这是我网站的
我已经为网页设置了背景，并且通过提供媒体查询来响应它。当我在 ipadpeek.com 上查看结果时(请查看网站 here 一次以查看原始纵向模式背景和横向模式背景) 对于 ipad 的分辨率，它在横
即使我的设备旋转(纵向->横向->纵向)，我也需要始终以横向模式录制视频。 取角度很简单，我用的是hyroscope。我的问题是总是横向录制视频。需要任何建议。 我正在使用 AVCaptureSess
我正在从 PHAsset 中获取视频，以便用户可以选择视频并导入以执行编辑。但是用户应该只能选择横向视频，如果用户选择纵向视频，她/他会收到警告消息，说明其纵向视频因此无法导入进行编辑。 实现此目的的
如果你去here在 iPad 上，点击 Chapter1 > Chapter 1 > Get started... 您将在加载屏幕后看到第 1 章页面。 基本上，这是将 html 嵌入到由 HTML5
我有一个可以纵向或横向启动的应用程序。我希望 Default.png 文件(应用程序启动时出现的初始图像)以正确的方向显示图像，因此我希望我需要使用两个不同的图像(不同尺寸)。但是，我不知道如何让应用
我正在寻找一个脚本来检测屏幕是横向还是纵向，而无需旋转手机(如果需要，则为初始屏幕尺寸)，以便在游戏为横向游戏时显示图像以旋转设备(并且页面的初始加载是纵向的)。 我找到了很多有关“方向更改”事件的信
我是一名优秀的程序员,十分优秀！