html5手机全屏,html5图片全屏

我用html5的video标签做的视频页面,在iphone上测试的时候视频都是全屏的,怎么才能不全屏?

虽然有的网页设置了自动全屏,但是点了“x”之后退出了全屏并且视频播放停下来了,点击播放时又全屏了,但是我们可以退出全屏并继续播放,具体方法:在全屏页用两指缩小手势(不是下滑或点“x”,即刻退出全屏并继续播放视频。如果是的,请采纳。

成都创新互联公司专注于企业全网整合营销推广、网站重做改版、疏附网站定制设计、自适应品牌网站建设、H5网站设计商城网站制作、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为疏附等各大城市提供网站开发制作服务。

HTML5播放器怎么双击全屏?

requestFullScreen。这是html5里面一个比较新的API。不同浏览器存在不同的方法前缀。需要区分。

可以对整个document进行全屏,或对某个元素全屏(比如vidio控件)

通常浏览器都会预先进行询问,比如弹出浮层让用户确认是否要全屏。只有用户确认全屏,你的全屏操作才会生效。

HTML5是近十年来Web标准最巨大的飞跃。HTML5并非仅仅用来表示Web内容,它也将Web带入一个成熟的应用平台,在这个平台上,视频,音频,动画,以及同电脑的交互都被标准化。随着HTML5的发展,各个浏览器都已经或即将支持HTML5。在大潮流的推动下,微软也表示将把HTML5作为IE9的核心,并将全力投入HTML5。

很多平时最喜欢上网看视频、玩游戏的朋友经常抱怨不爽,因为网上好多视频和游戏都需要安装Flash插件,并且速度也跟不上!HTML5的出现解决了这一难题。HTML5提供了音频视频的标准接口,实现了无需任何插件支持,只需浏览器支持相应的HTML5标签。怪不得都说HTML5是Flash的终结者!Safari5、Firefox4和Chrome6等浏览器加入了HTML5技术,可以免除Flash插件的安装直接播放视频 !

如何实现HTML5全屏模式Full Screen API

fullscreen API 接口

属性1:fullscreenElement 该属性返回当前处于全屏模式的DOM元素。

属性2:fullscreenEnabled 该属性返回当前 document 是否进入了可以请求全屏模式的状态。

方法1:requestFullscreen() 请求进入全屏模式。

方法2:exitFullscreen() 退出全屏模式。

事件1:fullscreenchange 进入/退出全屏模式切换时会触发。

事件2:fullscreenerror 进入/退出全屏模式失败时会触发。

由于fullscreen API 存在浏览器兼容性问题,所以我们在使用的时候需要进行跨浏览器处理,参考代码:

跨浏览器返回正处于全屏的元素

function fullscreenElement(){

var fullscreenEle = document.fullscreenElement ||

document.mozFullScreenElement ||

document.webkitFullscreenElement;

//注意:要在用户授权全屏后才能获取全屏的元素,否则 fullscreenEle为null

console.log("全屏元素:"+fullscreenEle);

return fullscreenEle;

}

跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态

function fullscreenEnable(){

var isFullscreen = document.fullscreenEnabled ||

window.fullScreen ||

document.webkitIsFullScreen ||

document.msFullscreenEnabled;

//注意:要在用户授权全屏后才能准确获取当前的状态

if(isFullscreen){

console.log('全屏模式');

}else{

console.log('非全屏模式');

}

}

跨浏览器发动全屏

function lanchFullscreen(element){

if(element.requestFullscreen){

element.requestFullscreen();

}

else if(element.mozRequestFullScreen){

element.mozRequestFullScreen();

}

else if(element.msRequestFullscreen){

element.msRequestFullscreen();

}

else if(element.webkitRequestFullscreen){

element.webkitRequestFullScreen();

}

}

跨浏览器退出全屏

function exitFullscreen(){

if(document.exitFullscreen){

document.exitFullscreen();

}

else if(document.mozCancelFullScreen){

document.mozCancelFullScreen();

}

else if(document.msExitFullscreen){

document.msExiFullscreen();

}

else if(document.webkitCancelFullScreen){

document.webkitCancelFullScreen();

}

}

各浏览器fullscreenchange 事件处理

document.addEventListener('fullscreenchange', function(){ /*code*/ });

document.addEventListener('webkitfullscreenchange', function(){ /*code*/});

document.addEventListener('mozfullscreenchange', function(){ /*code*/});

document.addEventListener('MSFullscreenChange', function(){ /*code*/});

各浏览器fullscreenerror 事件处理

document.addEventListener('fullscreenerror', function(){ /*code*/ });

document.addEventListener('webkitfullscreenerror', function(){ /*code*/});

document.addEventListener('mozfullscreenerror', function(){ /*code*/);

document.addEventListener('MSFullscreenError', function(){ /*code*/ });

跨浏览器全屏模式下样式代码

:-webkit-full-screen { }

:-moz-full-screen { }

:-ms-fullscreen { }

:fullscreen { }

如何使html5网页游戏封装成app后在安卓手机上全屏

打包成Android APP为例

下载安装MyEclipse2014,Android SDK,eclipse(需配置Android开发环境)

Java和Android环境安装与配置,将另写经验分享,读者也可百度参考其他相关资料,自行安装

打开MyEclipse2014,新建一个HTML5 Mobile Application Project,命名,例如:hello

html5程序在工程www目录下编辑;

编辑好我们的html5程序,下面就要开始学习打包了

这里介绍两种打包方式:1、PhoneGap Build Service 打包

PhoneGap官网有相关教程可参考,不具体介绍

2、android SDK +eclispe 打包

android SDK +eclispe 打包(前提已配置好,android开发环境):

Step1、启动eclipse,新建Android Application Project,即Android工程,命名,例如:hello

Step2、将前面Myeclipse2014中编辑好的HTML5程序拷至刚刚在eclipse新建hello工程对应assets目录下面

Step3、下面要做的就是如何将我们的HTML5程序在Android应用中启动,这里我们要使用Android系统自带的WebView控件(具体信息参考Adroid开发文档)---在工程下找到res-layout-activity_main.xml并打开,向里面插入WebView控件,编辑好自己想要的样式

8

Step4、在主程序入口,用刚刚编辑好的WebView控件将HTML5程序引入,此时,主体功能已实现,编译工程即可得到apk

我用HTML做了一个页面想让他在手机浏览器中全屏显示 可是只用了多一半屏幕

首先建议你用html5来开发,

然后,在网页的head中增加以上这句话:

meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /

可以让网页的宽度自动适应手机屏幕的宽度。

其中:

width=device-width :表示宽度是设备屏幕的宽度

initial-scale=1.0:表示初始的缩放比例

minimum-scale=0.5:表示最小的缩放比例

maximum-scale=2.0:表示最大的缩放比例

user-scalable=yes:表示用户是否可以调整缩放比例

如果是想要一打开网页,则自动以原始比例显示,并且不允许用户修改的话,则是:

[html] view plaincopy

meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /

这样子写后,就可以把一些页头横幅等的图片的宽度都设置成style="width:100%",整个页面在设备上看起来就是全屏的了。

关键就是调整上面的几个值了。


标题名称:html5手机全屏,html5图片全屏
文章路径:http://myzitong.com/article/dsiedec.html