H5内容安全尺寸

以iPhone6为基准：设计稿为750 * 1334 px

状态栏(status bar)：就是电量条，其高度为：40px

地址栏(navigation)/APP顶部栏：就是顶部条，其高度为：88px，各浏览器不同

菜单栏(submenu，tab)/APP底部栏：其高度为：98px，各浏览器不同

内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px-98px=1108px

所以下次再见一个内容区域为750 * 1334不留白的设计，打回去吧，别自己调了，帧蛋疼...

时间： 2024-10-07 13:14:25

H5内容安全尺寸的相关文章

【原】pageResponse - 让H5适配移动设备全家

上一篇文章<为什么选择iPhone5的分辨率作为H5视觉稿尺寸>最后留下了问题:是否需要视觉设计师设计多套的视觉稿供给前端工程师做页面适配呢?按照自己以前的方法,通常会要求设计师设计2套的尺寸,一套是窄屏手机(如iPhone4),另一套是宽屏手机(如iPhone5),这样的好处不仅减少重构页面的适配成本外,也在页面展现上提升页面的用户体验. 然而不管是设计2套还是3套以上的视觉稿来辅助前端来完成页面,最终还是会抵挡不住设备更新换代带来的适配问题,移动设备不断从低分辨率到高分辨率过渡,不同分辨率

原生JS 获取浏览器、窗口、元素等尺寸的方法及注意事项

一.通过浏览器获得屏幕的尺寸 screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去除状态栏后的屏幕高度二.获取浏览器窗口内容的尺寸 //高度 window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight //宽度 window.innerWidth || doc

css设置span元素的尺寸

css设置span元素的尺寸:在默认状态下是无法设置span元素的尺寸的,只能够根据内容的尺寸自适应,也就是说给span元素设置width和height属性默认条件是无效的.之所以会出现这种情况是因为span元素是内联元素,内联元素无法设置尺寸的,只要设置为块级或者内联块级元素即可.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=&qu

H5开发HybridApp

1 H5开发开发HybridApp一般都是先完成H5部分,所谓的H5就是Html5页面,开发的时候我们在PC机上的浏览器调试即可,这里推荐Chrome F12模式. 在调试服务器请求数据部分要给chrome设置跨域模式,如下: 然后以管理员的身份启动chrome: 开发H5,建议使用HBuilder,开发速度很快接下来安装cordova,本地需要已安装nodejs,确保可以正常使用npm命令.因为npm默认链接的是国外的源,所以如果网络不给力的话要切换成国内的源,比如淘宝的npm,具体如何切

（八十九）用AutoLayout实现动画和Label根据内容自动调整

[AutoLayout动画] 对于storyboard每个约束,都可以像控件那样通过拖线的方式来建立和代码的连接. 约束是一个对象,通过这个对象的constant属性可以修改约束的点数. 在修改之后,通过在UIView的animateWithDuration::方法的block内调用[self.view layoutIfNeeded]方法可以实现动画效果,调用layoutIfNeeded时,会调整所有子视图. self.redViewtopConstraint.constant += 100;

javascript之尺寸，位置，溢出

一.offsetWidth:元素的宽度,包括边框,内容,内边距. 二.offsetHeight:元素的高度,包括边框,内容,内边距. 三.offsetLeft:元素的X坐标(相对于最近已定位的祖先元素,如果没有则是窗口). 四.offsetTop:元素的Y坐标(相对于最近已定位的祖先元素,如果没有则是窗口). 五.clientWidth:元素的宽度,不包括边框,只包括内容和内边距. 六.clientHeight:元素的高度,不包含边框,只包括内容和内边距. 七.clientLeft:元素内边距的

获取浏览器高度窗口高度元素尺寸偏移属性

screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去除状态栏后的屏幕高度一.通过浏览器获得屏幕的尺寸二.获取浏览器窗口内容的尺寸 //高度 window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight //宽度 window.innerWidth || doc

jquery盒模型元素尺寸设置

jQuery有多个处理元素尺寸的方法 width():设置或返回元素的宽度(不包括padding.border.和margin) height():设置或返回元素的高度(不包括padding.border.和margin) innerWidth():返回元素的宽度(包括padding) innerHeight():返回元素的高度(包括padding) outerWidth():返回元素的宽度(包括padding和border) outerHeight():返回元素的高度(包括padding和bo

WebView显示h5图片并点击放大过多后的内存泄漏问题

最近在项目开发中用webview去显示加载h5内容,而h5内容中有一些图片,并且可以点击放大看图.在比较变态的测试方法(点击图片放大,关闭当前界面,再进入,再点击图片放大,大概10次左右)后,会导致图片点击没反映了(其实就是webview内存泄漏了).错误信息如下: 12-02 10:46:19.824: E/Surface(19632): dequeueBuffer failed (Invalid argument) 12-02 10:46:19.824: E/ViewRootImpl(196