css VH和VW单元可能会导致iOS设备出现问题。要解决此问题,请创建针对iO的宽度,高度和方向的媒体查询

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css VH和VW单元可能会导致iOS设备出现问题。要解决此问题,请创建针对iO的宽度,高度和方向的媒体查询相关的知识,希望对你有一定的参考价值。

/**
 * VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
 * 
 * To overcome this, create media queries that target the width, height, and orientation of iOS devices. 
 * It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing 
 * the height of element `.foo` —which is a full width and height cover image.
 *
 * iOS Resolution Quick Reference: http://www.iosres.com/
 */
 
 .foo {
    height: 100vh;
    width: 100vw;
    background: url(cover.jpg) center center / cover no-repeat;
 }
 

/** 
 * iPad with portrait orientation.
 */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
  .foo {
    height: 1024px;
  }
}

/** 
 * iPad with landscape orientation.
 */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
  .foo {
    height: 768px;
  }
}

/**
 * iPhone 5
 * You can also target devices with aspect ratio.
 */
@media screen and (device-aspect-ratio: 40/71) {
  .foo {
    height: 500px;
  }
}

以上是关于css VH和VW单元可能会导致iOS设备出现问题。要解决此问题,请创建针对iO的宽度,高度和方向的媒体查询的主要内容,如果未能解决你的问题,请参考以下文章

css VH和VW单元可能会导致iOS设备出现问题。要解决此问题,请创建针对iO的宽度,高度和方向的媒体查询

css VH和VW单元可能会导致iOS设备出现问题。要解决此问题,请创建针对iO的宽度,高度和方向的媒体查询

css VH和VW单元可能会导致iOS设备出现问题。要解决此问题,请创建针对iO的宽度,高度和方向的媒体查询

css VH和VW单元可能会导致iOS设备出现问题。要解决此问题,请创建针对iO的宽度,高度和方向的媒体查询

css VH和VW单元可能会导致iOS设备出现问题。要解决此问题,请创建针对iO的宽度,高度和方向的媒体查询

px、rpx、em、rem 、vw/vh、百分比的区别?