标签: media-queries

我的Web应用程序使用matchMedia.null无论传递什么值,有时都会调用此函数.这很奇怪,但它并不总是(可能是3次中的1次)而且只在FireFox中打开FireBug.有没有人面对这样的问题？

如果可能的话,我想在没有JavaScript的情况下这样做:

我将在页面上有2个或更多元素,我想更改页面大小的顺序.我正在使用媒体查询,并将根据屏幕大小提供不同的CSS.Div"a"应该正常位于顶部,但如果屏幕尺寸低于480px,那么b应该直接在a上.

<div id="a" class="myDivs">Top when on desktop</div>
<div id="b" class="myDivs">Becomes top when under 480px wide screen</div>

我必须在我的mobile.css中保存的CSS:

.myDivs {
  width: 100%;
}

所以没有指定高度; 因此,我不能简单地定位绝对值并设置margin-top或top.

我确信这是一个非常基本的问题,所以我提前道歉,因为我是新手.

我正在开发一个首先设计为移动设备的网络应用.由于我的所有初始布局都是针对小屏幕设计的,因此我推出了一款手机jpg作为<img>.然后我用绝对定位将我的画布覆盖到了这个上面.这给了我一个伪移动屏幕,我可以在试验我的设计时使用,而无需经常用手机测试.

我们的想法是使用合适的媒体查询,当遇到较小的屏幕时,使用这些查询display:block来防止图像被显示.

很短的时间我让它工作,但现在我已经打破它(没有备份)),看不出怎么样!它可以在更宽的桌面屏幕上正常工作.将显示图像容器,并且背景画布正确放置在顶部.然而,图像容器也在移动设备上显示(并且由于没有绝对位置),然后我的实际布局显示在.

HTML看起来像这样......

<div id="container">
    <img src='phone.jpg' class="desktop-visible"/>
</div>

<div id="backdrop">
    Text
</div>

我的CSS目前是这个......

// Set Defaults
.desktop-visible { display:none;}

// Desktop and landscape tablets
@media (min-width: 768px) {

.desktop-visible { display: block; margin: 0 auto; }

#container {
        position:relative;
        width: 538px;
        margin: 0 auto;
}

#container img {
        position:absolute;
        margin: 0 auto;
}

#backdrop {
        margin: 0 auto;
        position:absolute;
        top:86px;
        left:26px;
        width:483px;
        max-height: 862px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
}

// Portrait …

有没有办法在浏览器中欺骗媒体？具体来说,如果我的样式表中的媒体查询与桌面浏览器不匹配,我该如何测试它们？

任何人都有想法,关于所有有助于检测单个设备的媒体查询,例如:

iOS,iPhone 5,iPhone Ratina显示屏,Android手机.,iPad,平板电脑atc？

我想知道是否可以在页面加载之前使用jquery将元标记添加到html页面.我问的原因是因为我有一个没有视口元标记的页面,只有当分辨率低于700px时它才应该有 - <meta name="viewport" content="width=device-width, initial-scale=1"/>

原因是,我有移动网站的html标记(使用媒体查询)以及桌面版的html标记(我没有平板电脑的标记).我想确保为桌面设计的html标记在页面加载时以及在我们更改设备方向时在平板电脑上正确呈现.

提前致谢!

我已将媒体查询添加到我的网站，以便在用户浏览器的“最大宽度”小于480像素时，页面以300像素的宽度显示。

我的问题是这样的：当我使用Google Chrome浏览器的设备模拟器查看页面时-模拟器清楚地表明Apple iPhone 6的宽度为“ 375”像素，为什么我的300像素的网站显示的宽度要窄得多（约100像素）？

我很困惑，因为当我通过标准PC浏览器查看网站并减小浏览器的宽度时，一切都很好。当我使用模拟器时，即使它指定Apple iPhone 6的分辨率为375像素，为什么网页也缩小到约100像素？

有任何想法吗？

我要求使用Cordova(混合应用程序)HTML5和CSS构建Android应用程序,这个应用程序需要针对所有(仅)平板电脑设备从7"开始到最大(我相信它是10.1").有人可以就媒体查询的标准实施提出建议吗？在构建具有上述要求的混合应用程序时,我对Android的分辨率和DPI概念感到困惑.

我已经看到了很多关于这方面的问题,但是对于如何在使用DefaultDisplayMode类确定移动网站的Razor/MVC网站中如何做到这一点没有明确的答案.此外,很多答案只是代码片段,没有代码所在的详细信息(在控制器,视图,CSS等？)

所以首先,有一个调用EvaluateDisplayMode()的Global文件:

的Global.asax.cs

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();
        BundleConfig.RegisterBundles(BundleTable.Bundles);
        WebApiConfig.Register(GlobalConfiguration.Configuration);
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        DeviceConfig.EvaluateDisplayMode();
    }
}

App_Start文件夹中的EvaluateDisplayMode基于GetOverriddenUserAgent()类型设置移动和桌面类:

DeviceConfig.cs

public static class DeviceConfig
{
    const string DeviceTypePhone = "Mobile";

    public static void EvaluateDisplayMode()
    {
        DisplayModeProvider.Instance.Modes.Insert(0,
            new DefaultDisplayMode(DeviceTypePhone)
            {
                ContextCondition = (ctx => (

                    (ctx.GetOverriddenUserAgent() != null) &&
                    (
                      (ctx.GetOverriddenUserAgent().IndexOf("android", StringComparison.OrdinalIgnoreCase) >= 0) ||
                    (ctx.GetOverriddenUserAgent().IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0) ||
                    (ctx.GetOverriddenUserAgent().IndexOf("Window Phone", StringComparison.OrdinalIgnoreCase) >= 0) ||
                    (ctx.GetOverriddenUserAgent().IndexOf("Blackberry", StringComparison.OrdinalIgnoreCase) >= 0)
                    )
            ))
            });
    }
}

每个页面都有一个名为_AdminMaster.Mobile.cshtml的Layout/Master页面,它使用一个名为PhoneCommon.css的CSS文件.CSS没有什么特别之处(移动与桌面;没有媒体查询;我没有正确的CSS,我从客户端使用的另一个开发人员那里继承了它),除了高度没有一直延伸到底部页.这是CSS的一部分(相当冗长):

#main #content …

我的页面宽度低于991px,仍然'max-width 1200px'覆盖了我在css中的'max-width 991px'规则.

这是我的devtools窗口的屏幕截图:

这可以通过在'margin-top ...'css规则后面添加'!important'来解决.但我仍然想知道为什么会这样.