我在<head>我的网络应用程序中有以下代码,但我只是在我的iPhone 3GS上获得白屏,而DOM加载而不是启动画面.
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!--STYLES-->
<!--SCRIPTS-->
<!-- iPhone LAUNCHSCREEN-->
<link href="includes/images/apple-launch-480h.png" sizes="320x480" media="(device-height: 480px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) LAUNCHSCREEN-->
<link href="includes/images/apple-launch-480h2X.png" sizes="640x920" media="(device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5+ LAUNCHSCREEN-->
<link href="includes/images/apple-launch-568h.png" sizes="640x1136" media="(device-height: 568px)" rel="apple-touch-startup-image">
如何让我的启动画面在所有版本的iPhone上正确显示？代码未显示,但我的网络应用程序图标在添加到主页时正在运行.我正在使用jQuery Mobile来构建这个Web应用程序.
我还确认PNG图像的大小正确,我删除了Web应用程序图标,刷新并重新添加到主屏幕多次.我在StackOverflow上找到的解决方案都没有为我工作.我没有尝试过JavaScript解决方案,因为我确信有一个纯CSS解决方案.
我正在尝试支持我正在开发的当前站点上的各种像素比率.我还想确保提供任何所需的浏览器前缀,以支持最广泛的设备/浏览器.此外,我尽可能使用SVG,但我需要一个摄影图像的解决方案.理想情况下,我想提供:
我的问题是,为了达到这个目的,编写媒体查询的最佳方法是什么？我主要担心的是,我的论点对于我正在努力实现的目标是正确的.我很感激您的任何建议或建议.目前我的代码如下:
/* @1x Images (Pixel Ratio 1.0) */
#dgst_shopping_bag {background-image:url(img/shopping_bag.png);}
/* @2x Images (Pixel Ratio of 1.25+) */
@media only screen and (-o-min-device-pixel-ratio: 5/4),
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 1.25dppx) {
#dgst_shopping_bag {background-image:url(img/shopping_bag@2x.png);}
}
/* @3x Images (Pixel Ratio of 2.25+) */
@media only screen and (-o-min-device-pixel-ratio: 9/4),
only screen and (-webkit-min-device-pixel-ratio: 2.25),
only screen and (min-device-pixel-ratio: 2.25),
only screen and (min-resolution: …我有一个奇怪的问题,只有IE9才会出现.我正在开发一个具有桌面布局和移动布局的网页.相同的HTML,不同的CSS.下面的代码会出现问题:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (max-device-width: 640px)
除IE9外,所有浏览器都会根据需要显示桌面网站.移动浏览器正确显示移动布局.IE9的问题在于它还显示了移动布局.
现在,如果我从上面的代码中删除"only"和"screen"这两个词,那么IE9会正确显示桌面站点.问题是,移动浏览器也会显示桌面网站.我对此做了一些研究,并没有在这个问题上看到任何东西.
谢谢阅读,
约翰
respond.js或 CSS3,mediaqueries.js？
官方文档,特别是css3-mediaqueries.js的文档,是稀疏的.阅读SO,论坛和博客我总结了这些优点和缺点.
优点:
<link>,内联CSS,@ import-ed CSS)缺点:
min-width和max-widthem单位(巨大的弱点!)优点:
em单位(真的吗？有人测试过吗？)缺点:
是否有人有要添加到列表中的点,或要分享的个人经历,或者对一个或另一个脚本的特定偏好？如果是这样,为什么？
我已经搜索了一段时间,发现有些人让它工作,但没有一个提供任何代码示例.
我尝试了他们的建议,但它对我不起作用.通过建议,我尝试添加<meta http-equiv="X-UA-Compatible" content="IE=edge" />,respond.js或者css3-mediaqueries-js,但没有一个帮助.
这里有一个的jsfiddle,如果你与IE8浏览它,你会看到两个a与b在同一行,不管浏览器的宽度.
但是,如果您使用Chrome,FF或IE9或更高版本进行查看,则会根据浏览器宽度在不同的行或单行上看到它们.
UPDATE
我试图一次取消注释其中一个(css3-mediaquery,html5shiv并做出响应),但是对其中任何一个都没有运气.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span8">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/js/bootstrap.min.js"></script>
<%--<script type="text/javascript" src="js/css3-mediaqueries.js"></script>--%>
<%--<script type="text/javascript" src="js/html5shiv.js"></script>--%>
<%--<script type="text/javascript" src="js/respond.js"></script>--%>
</script> …internet-explorer-8 fluid-layout media-queries responsive-design twitter-bootstrap
我通过@media查询修改了我的网站HEAVILY,以便在手机上显示非常简洁.但是,我的用户要求提供该网站的桌面版本(可通过链接获得).
更进一步,桌面网站本身也会被@media查询修改,具体取决于分辨率.我在考虑选择一个"桌面"分辨率,比如1440x900并强制手机以该分辨率显示？
这可能是通过JavaScript吗？或者,这些@media查询可以完全禁用吗？
谢谢!
我试图根据浏览器大小显示/隐藏一些div,只使用css媒体查询...但似乎没有任何工作......请帮助,如果可以,让我知道我做错了什么. .. 提前致谢!
继承人我的css ..
@media all and (max-width: 959px) {
.content .700{display:block;}
.content .490{display:none;}
.content .290{display:none;}
}
@media all and (max-width: 720px) {
.content .700{display:none;}
.content .490{display:block;}
.content .290{display:none;}
}
@media all and (max-width: 479px) {
.content .700{display:none;}
.content .490{display:none;}
.content .290{display:block;}
}
这是我的HTML
<div class="content">
<div class="700">this is the content for desktop</div>
<div class="490">this is the content for tablet</div>
<div class="290">this is the content for mobile</div>
</div>
我正在开发一个基于Boostrap 3(html5boilerplate自定义版本)的小项目,并试图在boostrap文档中使用"官方"媒体查询:
/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) { ... }
由于某种原因,媒体查询似乎不存在(@ screen-sm,screen-md,screen-lg),我在bootstrap文件中搜索但是找不到任何引用.
我的示例代码(main.css):
/* Small devices (tablets, 768px and up) */
@media …我对bootsrap感到失败并想问,无论如何,当设备屏幕在Portrait中时总是使用"md"大小的列,并且当它在横向中总是使用"xs"列时？
我一直试图弄清楚是否有可能嵌套CSS特征查询(也称为"CSS @supports")和常规媒体查询,以及这样做的正确方法.
示例A显示了媒体查询中的功能查询.
示例B显示了要素查询中的媒体查询.
它甚至可以嵌套它们吗？如果是这样,是否有一种首选的嵌套方式？A还是B？
.foo {
background: red;
}
/* EXAMPLE A */
@media (min-width: 50em) {
.foo {
background: green;
}
@supports (flex-wrap: wrap) {
.foo {
background: blue;
}
}
}
/* EXAMPLE B */
@supports (flex-wrap: wrap) {
.foo {
background: green;
}
@media (min-width: 50em) {
.foo {
background: blue;
}
}
}
media-queries ×10
css ×7
css3 ×4
javascript ×2
fluid-layout ×1
html ×1
image ×1
ios ×1
iphone ×1
media ×1
polyfills ×1
show-hide ×1