JS 如何获取和监听屏幕方向的改变？

Posted 2023-04-06

大概写一下：

方法一：用触发手机的横屏和竖屏之间的切换的事件

代码如下：

window.addEventListener("orientationchange", function()

// 宣布新方向的数值

alert(window.orientation);

, false);

方法二：监听调整大小的改变

代码如下:

window.addEventListener("resize", function()

// 得到屏幕尺寸 (内部/外部宽度，内部/外部高度)

, false);

css判断横竖屏幕

代码如下:

@media screen and (orientation:portrait)

/* portrait-specific styles */



/* landscape */

@media screen and (orientation:landscape)

/* landscape-specific styles */



本地window.matchMedia方法允许实时媒体查询。我们可以利用以上媒体查询找到我们是处于直立或水平视角：

代码如下:

var mql = window.matchMedia("(orientation: portrait)");

// 如果有匹配，则我们处于垂直视角

if(mql.matches)

// 直立方向

alert("1")

else

//水平方向

alert("2")



// 添加一个媒体查询改变监听者

mql.addListener(function(m)

if(m.matches)

// 改变到直立方向

document.getElementById("test").innerhtml="改变到直立方向";



else

document.getElementById("test").innerHTML="改变到水平方向";

// 改变到水平方向



); 参考技术A 大概写一下：

方法一：用触发手机的横屏和竖屏之间的切换的事件

代码如下：

window.addEventListener("orientationchange", function()

// 宣布新方向的数值

alert(window.orientation);

, false);

方法二：监听调整大小的改变

代码如下:

window.addEventListener("resize", function()

// 得到屏幕尺寸 (内部/外部宽度，内部/外部高度)

, false);

css判断横竖屏幕

代码如下:

@media screen and (orientation:portrait)

/* portrait-specific styles */



/* landscape */

@media screen and (orientation:landscape)

/* landscape-specific styles */



本地window.matchMedia方法允许实时媒体查询。我们可以利用以上媒体查询找到我们是处于直立或水平视角：

代码如下:

var mql = window.matchMedia("(orientation: portrait)");

// 如果有匹配，则我们处于垂直视角

if(mql.matches)

// 直立方向

alert("1")

else

//水平方向

alert("2")



// 添加一个媒体查询改变监听者

mql.addListener(function(m)

if(m.matches)

// 改变到直立方向

document.getElementById("test").innerHTML="改变到直立方向";



else

document.getElementById("test").innerHTML="改变到水平方向";

// 改变到水平方向



);

方向改变后如何获取屏幕高度？

【中文标题】方向改变后如何获取屏幕高度？

【英文标题】：How to get the screen height after orientation change?

【发布时间】：2017-10-09 14:46:01

【问题描述】：

在方向更改后查询UIScreen.main.bounds.height 时，我得到了一些奇怪的结果。也许这不是正确的做法。

我有一个监听器来监听NSNotification.Name.UIDeviceOrientationDidChange 事件：

NotificationCenter.default.addObserver(self, selector: #selector(self.orientationChange), name: NSNotification.Name.UIDeviceOrientationDidChange, object: nil)

这会调用一个函数，将约束设置为新屏幕高度的 75%。这在 iPhone 上运行良好，但 iPad 返回错误的屏幕高度。

如果 iPad 处于 横向 方向，UIScreen.main.bounds.height 将返回一个等于 纵向 方向高度的值，反之亦然。

func orientationChange() 
    // This will print the correct value on iPhone and iPad.
    if UIDevice.current.orientation.isLandscape 
        print("Landscape")
     else 
        print("Portrait")
    

    let screenSize = UIScreen.main.bounds
    let screenHeight = screenSize.height
    self.searchViewHeightConstraint.constant = screenHeight * 0.75

    // Correct value on iPhone. Incorrect on iPad.
    print("screenHeight: '\(screenHeight)'") 

    UIView.animate(withDuration: 0.6, delay: 0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: .curveEaseOut, animations: 
        self.searchView.superview?.layoutIfNeeded()
    , completion: nil)

我也遇到过viewWilltransition 监控方向变化的方法，但这与上述方法的行为方式完全相反。 IE。 iPad 上的高度正确，但 iPhone 上的高度不正确：

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) 
    let screenSize = UIScreen.main.bounds
    let screenHeight = screenSize.height
    self.searchViewHeightConstraint.constant = screenHeight * 0.75

    // Correct value on iPad. Incorrect on iPhone.
    print("screenHeight: '\(screenHeight)'") 

iPhone 和 iPad 之间出现这种不一致行为的原因是什么？使用 NotificationCenter 监控方向变化的正确方法是什么？

【问题讨论】：

screenHeight 的值更大还是更小？

停止使用screensize = UIScreen.main.bounds，改用size，方法里给你了。你可以做 size.height * 0.75

另外，如果您使用约束并且您的 searchView 等于视图的高度，那么在同一个 heighViewConstraint 上，您可以将修饰符设置为 0.75，如果它始终是那个大小。然后你会得到的是旋转视图会自动更新，你根本不需要做任何逻辑。

【参考方案1】：

你应该使用的是 viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator)。这将为您提供大小，并且比使用通知更可靠。

另外，如果你想做动画，在 UIViewControllerTransitionCoordinator 内部你可以利用方法animate(alongsideTransition animation: ((UIViewControllerTransitionCoordinatorContext) -> Swift.Void)?, completion: ((UIViewControllerTransitionCoordinatorContext) -> Swift.Void)? = nil) -> Bool

【讨论】：

我已经尝试过了，它的行为与我的问题中的代码完全相反。 IE。它在 iPad 上报告正确的尺寸，但在 iPhone 上报告错误的尺寸。

您是否尝试过使用动画（alongsideTransition...）？我已经使用了这个，并且在完成该方法时，一切似乎都到位了。

所以当我创建一个测试项目并打印出 iPhone 的尺寸时，我得到：landscape (736.0, 414.0) 和 portrait (414.0, 736.0)，然后对于 iPad，我得到 landscape (1024.0, 768.0) 和 portrait (768.0, 1024.0)。这些是 iPad Air 2 和 iPhone 8。

您对viewWillTransition 的看法是正确的。我应该一直使用 size 参数而不是查询 UIScreen 边界。非常感谢。

【参考方案2】：

你需要使用：

dispatch_async(dispatch_get_main_queue())  
println("h:\(view.bounds.size.height)")
println("w:\(view.frame.size.width)")
         

//所有你需要在dispatch_async下写代码

此代码将在轮换完成（在主队列中）并且新尺寸可用后执行。

【讨论】：

阿门，谢谢！ DispatchQueue.main.async print("Hello") in swift 3/4

【参考方案3】：

这在适用于 iPad 和 iPhone 的 Swift 2.3 中适用于我。

override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) 
    print(size.height)

  if UIDevice.currentDevice().orientation.isLandscape 
     print("Landscape")
     print(size.height)

   
 else 
      print("Portrait")
      print(size.height)