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图片全屏
文章路径：https://www.cdcxhl.com/article42/dsiedec.html

成都网站建设公司_创新互联，为您提供网站维护、微信公众号、关键词优化、营销型网站建设、用户体验、网站设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联