- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在设计一个响应式网站,它在大多数设备上运行良好。我使用两个不同分辨率的显示器、一个联想平板电脑和两个安卓手机(galaxy S4 和 sony Xperia)。所有这些看起来都很棒
但是,在 Iphone 上,我的布局有两个问题。
iPhone screenshot of blank bar
它在 iPhone 4 simulator 上处理这两个问题所以我不认为它只是我正在测试的一部手机。
这是 website 的链接
这是我使用的视口(viewport)
<meta name="viewport" content="width=device-width, initial-scale=1">
这是什么原因造成的?
编辑 - 我正在使用的所有媒体查询
/*Center Logo when on mobile*/
@media all and (min-width: 0px) and (max-width: 989px){
#logo{
text-align:center;
}
}
/*Add margin top on desktops*/
@media all and (min-width: 990px){
#navigationPages li{
margin-top:25px;
}
}
/*Remove margin top when on mobile*/
@media all and (min-width: 0px) and (max-width: 989px){
#navigationPages li{
margin-top:5px;
}
}
/*Change font size of navigation on mobile*/
@media screen and (max-width: 468px) {
#navigationPages li {
font-size: .85em;
}
#navigationPages li a {
padding: 0.75em 0.6em;
}
}
/*Float icons right on medium sized screens*/
@media all and (min-width: 628px) and (max-width: 989px){
#headerIcons img{
display:block;
float:right;
margin-left:15px;
}
}
/*float left again for phones*/
@media all and (min-width: 0px) and (max-width: 627px){
#headerIcons img{
display:block;
float:left;
margin-left:15px;
}
}
/*Change font size of navigation on mobile*/
@media screen and (max-width: 814px) {
#cityBackground p {
font-size: 25px;
text-justify:inter-word;
}
}
/*Change font size of navigation on mobile*/
@media screen and (max-width: 623px) {
#cityBackground p {
font-size: 17px;
text-justify:inter-word;
}
}
/*Reduce button sizes on mobile*/
@media all and (max-width: 989px){
#buttonHolder img{
width:30%;
display:block;
margin-left: auto;
margin-right: auto;
}
}
/*center icons on mobile*/
@media all and (min-width: 0px) and (max-width: 989px){
#icon1 img{
display:block;
margin-left:auto;
margin-right:auto;
min-width:162px;
}
}
/*Center titles on mobile*/
@media all and (min-width: 0px) and (max-width: 989px){
.whoWhatWhyTitles{
text-align:center;
margin-top:25px;
font-size:32px;
margin-right:35px;
}
}
/*Remove padding of text on mobile*/
@media all and (min-width: 0px) and (max-width: 989px){
#whoWeAre p{
margin-top:5px;
font-size:20px;
padding-left:0;
width:99%;
text-align:center;
}
}
/*Remove padding of text on mobile*/
@media all and (min-width: 0px) and (max-width: 989px){
#whatWeDo p{
margin-top:5px;
font-size:20px;
padding-left:0;
width:99%;
text-align:center;
}
}
/*Remove padding of text on mobile*/
@media all and (min-width: 0px) and (max-width: 989px){
#whyChooseUs p{
margin-top:5px;
font-size:20px;
padding-left:0;
width:99%;
text-align:center;
}
}
/*Remove padding of text on mobile*/
@media all and (min-width: 0px) and (max-width: 623px){
#footerThin p{
margin-left:0;
}
}
最佳答案
屏幕变宽的原因是标题根本没有改变。这就是为什么它会在 iPhone 镜头上消失的原因。好消息是我们根本不需要媒体查询。我们可以将其设置为 max-width
为屏幕的 100%
。将下面的代码添加到您的样式表中,如果问题解决了请告诉我。
CSS:
#logo img {
max-width:100%;
height:auto;
}
CSS 备选方案 1:(这将在每一侧提供一点填充)。
#logo img {
max-width:96%;
margin:0 auto;
height:auto;
}
当前:
使用新的 CSS:
使用替代 CSS:
此外,您需要将 height:auto
添加到 Learn More 和 Get Started 按钮,以防止它们被拉伸(stretch)。
您问的是关于分两行的菜单。如果您更改填充,它应该会解决这个问题。
当前的 CSS:
#navigationPages li a {
display: block;
padding: 0.75em 1.5em;
}
工作 CSS:
#navigationPages li a {
display: block;
padding: 0.75em 1em;
}
关于android - 我的网站无法在 Iphone 上正常缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22480436/
我有这个网站,这个特定页面是安全的,但是当它回发时,它回发到一个不安全的页面。如何解决? 我正在使用 ASP.NET 向导。我有这个页面 - checkout.aspx,页面包含这个控件 checko
我有 2 个 azure 网站 - 两个独立的项目 我现在有 2 个网址: myazurewebsite.azurewebsites.net myazureblog.azurewebsites.net
我有 2 个 azure 网站 - 两个独立的项目 我现在有 2 个网址: myazurewebsite.azurewebsites.net myazureblog.azurewebsites.net
环境: 旧网站: React 托管在 Heroku URL( http://sameurl.com ) 新网站: Java 托管在 Heroku URL ( http://sameurl.com )
我已在 Windows Azure 上注册了一个测试帐户来对其进行测试。我构建了一个 Hello world ASP.NET Web 应用程序 + 数据库只是为了测试。 我安装了 Visual Stu
我有一个可以收集和显示各种测量值的产品(不会详细介绍)。正如人们所期望的那样,显示部分是一个数据库+建立在其之上的网站(使用 Symfony)。 但是,我们可能还会创建一个 API 来向第三方公开数据
这个问题在这里已经有了答案: Software keyboard resizes background image on Android (16 个答案) 关闭 8 年前。 我有一个类似的问题:So
这个问题似乎很常见,但我真的无法根据现有答案解决问题。 我有一个简单的 maven 项目,没有任何复杂的部署配置等,并且想在点击“mvn site”时生成一个 Maven CheckStyle 报告。
有没有人看过有关何时进行横向扩展与纵向扩展的最佳选择的任何分析或信息。什么时候一个比另一个更有意义。 目前,在标准模式和基本模式下,2 个小型实例的费用与 1 个中型实例的费用相同。 拥有 2 个小型
有没有办法找到 azure 网站何时停止? (我通过门户网站停止了网站,但我不记得是什么时候......) 我正在寻找一些日志,但没有找到任何有用的内容。 谢谢。 最佳答案 您拥有的最接近的是 azu
我目前在 Azure VM 的 IIS 中拥有一个网站。我已将该站点复制到 2 个可用区域中的 2 个虚拟机上。 这可以保护网站免遭停机。 我需要为高负载时刻实现一些可扩展性。这似乎就是创建音阶集的目
我有一个托管在 Azure 上的网站 ( http://mike-ward.azurewebsites.net/ )。我从 Azure 门户设置了一个指向(引用?)我的网站的 Azure CDN。根据
我有一个 Azure 网站(不是 Web 角色),有 2 个槽:生产和暂存。 我只想为生产插槽启用 CDN,而不是为登台启用,问题是我找不到识别主机插槽的方法。 RoleEnvironment 不可用
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提出有关书籍、工具、软件库等建议的问题。您可以编辑问题,以便可以用事实和引用来回答它。 4年前关
我们正在考虑将一些网站从 Azure 云服务迁移到 Azure 网站(事情似乎就是这样进行的)。显然,我们被明确告知云服务不会保留文件系统状态,因为它们会在机器故障时重新部署。 我假设网站是基于 Bl
我有一个 Azure 网站,需要使用在 VM 上运行的 Elasticsearch 服务。 虽然我需要能够锁定对 Elasticsearch 的访问,以便只有 Azure 网站可以访问它,但我似乎无法
我有一个 azure 网站,位于 yis3.azurewebsites.net - 我已将其提升为“共享”网站,以便我可以使用自定义域。我拥有从 123-reg.co.uk 购买的域名 yorkshi
我正在使用 abcPDF 动态创建 PDF。 我想保存这些 PDF,以便客户随时检索。最简单的方法(也是我现在在当前服务器上所做的方法)是将完成的 PDF 保存到文件系统。 看来我一直坚持使用 blo
我们正在尝试了解 Windows Azure 管理 API 为 Azure 网站(而非 Webroles)返回的监控数据的复杂性 例如,下图描述了为 CPUTime 检索的数据点。它似乎表明,在晚上
看起来真的很愚蠢,因为我找不到它: 门户网站似乎不太直观,我如何为一个“网站”付费并在其中运行最多 500 个网站?我想当我通过单击左下角的加号添加“网站”时,我添加了整个虚拟机而不是子站点。如何仅添
我是一名优秀的程序员,十分优秀!