web app 页面旋转整体样式问题

 $(window).bind("orientationchange", function (event) {
                if (event.orientation) {
                    //portrait  竖屏    landscape   横屏
                    if (event.orientation == ‘portrait‘) {
                        if (browser.versions.android) {
                            //安卓手机触发时间晚,设定一个延迟
                            setTimeout(function () {

                                //需要变更的元素长宽
                                $("#contents").css("height", parseInt($(window).height() - 44));
                                $("#joinclub").css("width", $(window).width());
                            }, 300);
                        }
                        else {
                            $("#contents").css("height", parseInt($(window).height() - 44));
                            $("#joinclub").css("width", $(window).width());
                        }
                    }
                    else if (event.orientation == ‘landscape‘) {
                        if (browser.versions.android) {
                            setTimeout(function () {
                                $("#contents").css("height", parseInt($(window).height() - 44));
                                $("#joinclub").css("width", $(window).width());
                            }, 300);
                        }
                        else {
                            $("#contents").css("height", parseInt($(window).height() - 44));
                            $("#joinclub").css("width", $(window).width());
                        }
                    }
                }
            });

  

时间: 2024-08-01 04:08:43

web app 页面旋转整体样式问题的相关文章

css3实现web app翻页过度效果

最近在开发web app页面,要实现滑动翻页,一开始实现的效果是无任何过渡效果的,可是这样子的话页面会闪跳一下,用户体验非常不好.于是我们主管叫我用jquery mobile,可是用了这个库之后,问题来了,跳转到的目标页面,无法加载目标页面引入的外部css文件,最后用css3完美地解决了这个问题: .pt-page-moveToLeft { -webkit-animation: moveToLeft .6s ease both; -moz-animation: moveToLeft .6s ea

使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 页面事件与 deferred

在系列的上一篇文章<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解>中,Kayo 介绍了除页面事件外的其他 jQuery Mobile 事件,而页面事件由于事件数较多,并且涉及 jQuery 中一个比较复杂的对象 deferred ,因此在本文中单独说明.jQuery Mobile 页面事件使用分为页面加载事件 (Page load events),页面跳转事件 (Page change events),页面显示/隐藏事件 (

android API Guides 之 web app --------------Building Web Apps in WebView(WebView与页面的绑定)

如果你要在手机端实现一个web app或在app里加载一个web页面,那么你就要用到WebView控件.这WebView类是View类的扩展子类,它允许web页面作为应用布局的一部分来展示.它是不具备一个完整的浏览器的那些特性,例如WebView没有导航栏,地址栏等.WebView的默认功能就是去找事WebView. 当你在你的app里面加一些以后可能跟新的信息时(例如用户协议或用户指南),你是用WebView那是非常有帮助的.在你的应用里,你可以创建一个带有WebView的activity,然

web app教程:MUI学习笔记第二课:页面布局

页面初始化 在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady()方法,涉及到HTML5+的api,建议都写在mui.plusReady方法中.如下为打印当前页面URL的示例: mui.plusReady(function(){      console.log("当前页面URL:"+plus.webview.currentWebview().getURL());}); mui.init() 

为Go Web App 创建一个主页面

原文地址 ?? 大多数web app都有一个相同的布局.这个布局可能包含一个header或者footer,甚至可能包含一个导航菜单.Go的标准库提供一个简单的方式来创建这些基本元素,通过被不同的页面重用,创建出模板页的效果.?? 这个简单的例子来解释如何实现的:?? 让我们来创建一个简单的包含两个view的web app,一个是 main 一个是about.这两个view都有相同的header和footer.?? header模板的代码如下: {{ define "header" }}

Progressive Web App

下一代 Web 应用? 近年来,Web 应用在整个软件与互联网行业承载的责任越来越重,软件复杂度和维护成本越来越高,Web 技术,尤其是 Web 客户端技术,迎来了爆发式的发展. 包括但不限于基于 Node.js 的前端工程化方案:诸如 Webpack.Rollup 这样的打包工具:Babel.PostCSS 这样的转译工具:TypeScript.Elm 这样转译至 JavaScript 的编程语言:React.Angular.Vue 这样面向现代 Web 应用需求的前端框架及其生态,也涌现出了

怎么判断一个APP是原生APP、混合APP还是WEB APP ?

1.看断网情况 通过断开网络,刷新页面,观察内容缓存情况来有个大致的判断,可以正常显示的就是原生写的,显示404或者错误页面的就是html页面. 2.看布局编辑 3.看复制文章的提示,需要通过对比才能得出结果. 比如文章资讯页面可以长按页面试试,如果出现文字选择,粘贴功能的是H5页面,否则是native原生的页面. 有些原生APP开放了复制粘贴功能或者关闭了,而H5的CSS屏蔽了复制选择功能等情况,需要通过对目标测试APP进行对比才可知. 在支付宝APP.蚂蚁聚宝是可以判断的. 4.看加载的方式

慕课网实战—《用组件方式开发 Web App全站 》笔记五-折线图组件开发

运用HTML5.CSS3.JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告! <用组件方式开发 Web App全站 > 折现图绘制大致步骤 折线图画布 JavaScript CSS 折线图绘制网格线 // 水平网格线 100份 -> 10份 var step = 10; ctx.beginPath(); ctx.lineWidth = 1; ctx.strokeStyle = '#AAAAAA'; window.ctx = c

web app变革之rem(转载)

rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其实很相似,只不过一