如何用CSS或者JS设置一张图片,让手机横屏(宽480)看或者竖屏(宽320)看都是满屏。

html-css011

如何用CSS或者JS设置一张图片,让手机横屏(宽480)看或者竖屏(宽320)看都是满屏。,第1张

图片宽度设成100%,理论上不是单色图案、重复背景图案、或js动态生成的画布上的矢量图,jpg之类的是没办法满屏的,320的时候满屏了,横过来看480的时候,高度又少了,可视区外还有一截。

对于样式: 通过html标签可强制移动端浏览器横屏或竖屏但兼容性较差,目前仅有: UC强制竖屏:<meta name="screen-orientation" content="portaint"> QQ强制竖屏:<meta name="screen-orientation" content="landscape"> 通过HTML标签media识别横屏和竖屏,分别引用不同的css: 竖屏: <link rel="stylesheet" media="all and (orientation:portrait" href="portrait.css"> 竖屏: <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 通过css媒体查询判断横竖屏,并分别指定样式: @media screen and (orientation: portrait) { //竖屏  CSS } @media screen and (orientation: landscape) { //横CSS }对于事件:通过onorientationchange事件或resize事件监听手机的横竖屏,分别指定对应的事件。强制通过页面 禁止app或手机的横竖屏的切换是不现实的,H5只能针对自身页面做适配!!!