h5制作:请竖屏浏览获得最佳体验

在我们近期的一个h5切图的项目中,因为h5手机网站在竖屏下的效果最好 ,横屏下体验不好,那么如果能够在用户横屏浏览的时候,给一个提示:请竖屏浏览获得更加体验。那就可以很好的解决了。

网上很多js解决方案和css多媒体查询但是需要一个个测试,以下是亲测有效的做下笔记

@media (max-width:1000px) and (orientation: portrait) {

当屏幕小于1000并且为竖屏的时候。。

}

@media (max-width:1000px) and (orientation: landscape) {

当屏幕小于1000并且为横屏的时候。。

}

时间: 2024-08-25 08:56:54

h5制作:请竖屏浏览获得最佳体验的相关文章

H5网页判断手机横屏或是竖屏

我们做出来的H5页面在手机端浏览的时候,用户很有可能会产生更换横竖屏的操作,这时如果我们能够判断出横竖屏,就可以更好的优化我们的网页,进而拥有更好的用户体验度.下面是判断横竖屏的代码: window.addEventListener('orientationchange', function(event){     if ( window.orientation == 180 || window.orientation==0 ) {         alert("竖屏");     }

12 款不能少的使网页浏览获得的最佳体验Chrome 扩展

原文地址:http://whosmall.com/?post=414 本文标签: Chrome扩展 网页浏览体验 引擎划词翻译工具 Chrome浏览器 相信不少朋友和我一样,每安装新的操作系统之后,都会使用 Safari/IE 下载 Chrome 浏览器,然后将后者作为主力上网浏览器,而将前者束之高阁.毕竟从体验上说,Chrome拥有快速流畅的浏览体验,当然强大丰富的扩展也是让我一见倾心的关键. 此前我们向各位介绍了数款颇受欢迎的 Chrome 扩展,而今天笔者我起一回私心,给大家安利一些我正在

iOS中的屏幕的旋转(UIViewController)横屏竖屏

RootViewController //视图控制器(UIViewController):它不是视图,用来管理视图,所以屏幕上看不到,但是自身携带一个视图(根视图) #import "RootViewController.h" #import "LoginView.h" //视图控制器的延展 @interface RootViewController () @end //视图控制器的实现部分 @implementation RootViewController //

完美解决Android使用Zxing扫描二维码改成竖屏后,后面的预览画面出现了拉伸,扭曲的情况

完美解决解决Android使用Zxing扫描二维码改成竖屏后,后面的预览画面出现了拉伸,扭曲的情况 第一步:找到com.zxing.camera包下的CameraConfigurationManager.java文件中的void initFromCameraParameters(Camera camera)方法 第二步:在 Log.d(TAG, "Screen resolution: " + screenResolution);后加上如下的代码 Point screenResoluti

cocos2dx怎样设置ios和Android横屏竖屏的几种方法

cocos2d-x编译到ios上.默认是横屏的,若要改为http://竖屏.不同的ios版本号.方法也会不同 在ios7上或许我们设置好了横竖屏.但到了ios6上或许会变化.以下白白给大家分享一下我的做法 转载请注明地址http://blog.csdn.net/u010229677 1.通用的 仅仅须要在RootViewController.mm文件中面 - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)

Intense Images – 全屏浏览图像的 JS 插件

Intense Images 是一个独立的 JavaScript 库,用于查看全屏图像.使用触摸/鼠标来实现图片位置的平移.图像元素的所有样式都是可以自定义的,Intense.js 只处理图像浏览器和字幕的制作. 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQuery 动画插件 精心挑选的美轮美奂的 jQuery 图片特效插件 精心挑选的优秀jQuery Ajax分页插件和教程 精心挑选的优秀 jQuery 文本特效插件和教程 源码下载

竖屏小游戏--喵星战争源代码分析【完整】

 转载请注明出处:http://blog.csdn.net/oyangyufu/article/details/26942311 源代码地址:http://download.csdn.net/detail/oyangyufu/7409593 Ccp文件介绍: GameMenuScene.cpp游戏主菜单 GameMainScene.cpp游戏主页面 GameObjHero.cpp主角 GameHeroBullet.cpp主角的子弹 GameObjEnemy.cpp敌人 GameEnemyBull

Zxing 竖屏切换 android

Zxing 竖屏切换  android 在google上下载的ZxingDemo 为横屏状态 我简单的在Androidmanifest.xml把Activity换成竖屏android:screenOrientation="portrait" 屏幕虽然正了 但是屏幕上显示的拍摄画面还是横着的 查了一些网上的资料   结合自己手工调试 在这里总结分享一下 步骤: 1)   在AndroidManifest.xml中把  <Activity  />标签  CaptureActiv

应用之星:最好用的H5制作平台-附H5制作教程

H5是HTML5的简称.HTML5是HTML最新的修订版本,是一种超文本标记语言.H5有两大特点:首先,强化了 Web 网页的表现性能.其次,追加了本地数据库等 Web 应用的功能. H5页面就是利用html5制作出来的页面,在微信朋友圈非常火爆,那么今天通过应用之星平台跟大家分享一下H5制作过程. 首先:进入应用之星网站,注册账号并激活. 其次:点击“应用制作”,进入的页面将看见“高级模式”.在高级模式下,你可以直接使用系统模板,也可以自己新建应用,根据自己的需要选择. 极简模式:里面有一键淘