Question

首先，我很抱歉问题的标题，因为我无法弄清楚如何描述我的问题，所以这就是我使用这个标题的原因。

现在我开始使用媒体查询，并且我在我的练习项目中使用它们以获得响应性，我想在该项目上应用方向锁定。例如，该项目与移动纵向视图兼容，但在移动横向视图中不可用。

我已经为方向锁应用了以下代码，但问题是当浏览器窗口调整大小并且与屏幕分辨率匹配时，锁应用。我不希望锁定应用于桌面视图。

有一种方法是使用设备宽度，但已被mozilla弃用。那么，有没有办法只用min-width或其他东西解决这个问题？

如果您无法理解，请告诉我。

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
    <style>
    #div-2{
    display:none;
    }
    @media screen and(min-width:320px) and (orientation:landscape){
    #div-1{
    display:none;
    }
    #div-2{
    display:block;
    }
    }
    </style>
</head>
<body>
    <div id="div-1"><p>Orientation lock not applied.</p></div>
    <div id="div-2"><p>Orientation lock applied.</p></div>
</body>

Answer 1

好的我明白了现在替换代码希望这对你有用：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FileOpener } from 'ionic-native';

@Component({
  selector: 'page-installHelper',
  templateUrl: 'installHelper.html'
})
export class InstallHelper {

  constructor(public navCtrl: NavController) {
        FileOpener.open('/assets/app.apk', 'application/vnd.android.package-archive',
        { 
            error : (e)=> {console.log('Error status: ' + e.status + ' - Error message: ' + e.message);},
            success : ()=> {console.log('file opened successfully');}
        });
  }

}

Answer 2

我认为没有什么奇怪的事情。

您编写此媒体查询：

@media only screen and (min-width:320px) and (orientation:landscape) {
        #div-1 {
            display: none;
        }

        #div-2 {
            display: block;
        }
    }

包含桌面。所以在桌面div-1中是hide，div-2是可见的。

如果您希望此媒体查询仅适用于移动设备，则必须使用 max-width

过滤大于您想要的屏幕（桌面）。这意味着样式不适用于桌面。此媒体查询适用于浏览器的大小，如果您想过滤某些与浏览器宽度无关的设备大小，则必须使用此媒体查询：

@media only screen and (max-device-width: 320px)

防止在桌面视图（横向）上运行移动特定媒体查询（格局）

2 个答案: