核心问题是移动浏览器（我正在为您浏览，Chrome和Safari）具有“帮助”功能，其中地址栏有时可见，有时隐藏，从而改变了视口的可见大小。...这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为浏览器的高度，并隐藏了地址栏。结果是，当地址栏可见时，屏幕的底部将被切除。...如下所示： 当显示地址栏时，由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应隐藏在屏幕底部的按钮。...更糟糕的是，当用户首次访问移动设备上的网站时，地址栏将在顶部可见，因此默认的体验是破碎的体验。...例如，尝试在移动浏览器上打开wordsheet.io/demo/V3Y 。无论地址栏是否可见，屏幕都将是视口的高度。
3.2 移动端开发 在 iOS、 Android和 ReactNative开发中样式单位其实都使用的是设备独立像素。...在 Web浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI， 菜单栏等——即指你正在浏览的文档的那一部分。...window.outerHeight：获取浏览器窗口外部的高度。表示整个浏览器窗口的高度，包括侧边栏、窗口镶边和调正窗口大小的边框。...window.screen.Height：获取获屏幕取理想视口高度，这个数值是固定的， 设备的分辨率/设备像素比 window.screen.availHeight：浏览器窗口可用的高度。...document.documentElement.clientHeight：获取浏览器布局视口高度，包括内边距，但不包括垂直滚动条、边框和外边距。
核心问题是移动浏览器（我正在为您浏览，Chrome和Safari）具有“帮助”功能，其中地址栏有时可见，有时隐藏，从而改变了视口的可见大小。...这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为浏览器的高度，并隐藏了地址栏。结果是，当地址栏可见时，屏幕的底部将被切除。 如下所示： ?...当显示地址栏时，由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应隐藏在屏幕底部的按钮。...更糟糕的是，当用户首次访问移动设备上的网站时，地址栏将在顶部可见，因此默认的体验是破碎的体验。...例如，尝试在移动浏览器上打开wordsheet.io/demo/V3Y 。无论地址栏是否可见，屏幕都将是视口的高度。
本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索，来分享移动应用界面设计中的尺寸规范等问题，希望能给移动端的新手设计师些许指引。若有不当之处，欢迎斧正。...尽管概念不同，但是对于移动设备的显示屏，可以看作ppi=dpi 。 ppi的运算方式是：PPI = √（长度像素数² + 宽度像素数²） / 屏幕对角线英寸数。...在android规范中对于导航栏、工具栏等的尺寸没有明确的规定。...但根据48dp原则，以及一些主流的android应用的截图分析，总结一下尺寸要求： 状态栏高度：50 px 导航栏、操作栏高度：96 px=48dp x 2 主菜单栏高度：96 px 内容区域高度：1038...px （1280-50-96-96=1038） Android最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，高度也和菜单栏一样为：96 px 4、图标和字体大小（来自官方规范文档） a、启动图标
（一）几个概念 1.css像素 html中度量的单位 用px来计算，在pc中往往 1 css px ＝ 1 物理像素 css像素时抽象和相对的了，在不同设备中1px对应不同的设备像素；iphone3分辨率是...5.layout viewport 移动设备的默认viewport,css布局是以layout viewport 来做为参考系计算的 document.documenElement.clientWidth...设备屏幕的尺寸 单位是物理像素 screen.width 获取 屏幕尺寸是不变的 在该viewport中用户不需要缩放和横向滚动就可以正常查看网站的所有内容 设置移动端网站一般以这个viewport为准...viewport的width，android 自带浏览器支持设置 target-densitydpi来达到目的； target-densitydpi = UI-width/device-widthwindow.devicePixelRation160...miniual-ui ios的safari为meta表天新增的属性，在网页加载是隐藏顶部的地址栏和底部的导航栏 （三）相关代码讲解 移动页面设计 480*854的比例 dpi = 480/screen.widthwindow.devicePixelRatio160
safari私有meta标签，它表示：允许全屏模式浏览，在ios上，用户将网页添加到主屏后，再从主屏幕打开这个网页，可以隐藏浏览器的地址栏和下面的toolbar； 第二个meta标签表示：强制让文档的宽度与设备的宽度保持...--不让android识别邮箱--> 自定义主屏上的图标 用户添加到主屏后，如果网站没有图标，则默认主屏上的图标为当前网页的截图，你可以通过下面的代码指定在普通和retina屏幕上的icon： <link...添加初始化图片 用户点击你桌面上的webapp的图标后，打开会加载浏览器（实际上是webkit webview模块），然后下载、解析、渲染，在这个过程中，ios允许我们使用一个初始化图片来替代白色的浏览器屏幕...Web App》、《iOS / Android 移动设备中的 Touch Icons》这两篇文章了解更多。...其他js杂项 window.scrollTo(0,0); /*隐藏地址栏*/ window.matchMedia(); /*匹配媒体*/ navigator.connection; /*决定手机是否运行在
核心问题是移动浏览器（说的就是你，Chrome和Safari）具有“有用”功能：地址栏有时可见，有时隐藏，从而改变了视口的可见大小。...当视口高度变化时，这些浏览器没有将100vh的高度调整为屏幕的可见部分的高度，而是将100vh设置为隐藏了地址栏的浏览器的高度（其实就是100vh高度没变，但是地址栏那块把内容顶出去了一块）。...例如，尝试在移动浏览器上打开wordsheet.io/demo/V3Y。无论地址栏是否可见，屏幕都将是视口的高度。...此外，在页面首次加载时将高度固定为适当的大小，可以防止在使用该网站的过程中地址栏隐藏，从而带来尴尬的屏幕调整大小体验。...遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。100vh是如此接近伟大（greatness），但考虑到它在移动设备上的局限性，最好避免使用它。
声明viewport视口 viewport对于移动端设备来说非常的重要，用于定义视口的各种行为。...这种方式用户的体验度会非常的差，所以我们设定width=device-width，意思是当前设备屏幕有多宽，那么就按照多宽来渲染页面，这样就不会出现需要靠缩小或者左右移动来看完整个页面了。...Safari（其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接。...(只对IOS有效) 当我们将一个网页添加到主屏幕时，会更希望它能有像App一样的表现，没有地址栏和状态栏全屏显示。...有一套规范，就是在IOS设备的图标统一为“四边圆角”、“高光处理”。
今天终于找个一个兼容Android和iOS的方法了。...测试结果是Android 2.2+自带浏览器、iOS5+自带浏览器、Chrome移动版、Firebox移动版和UC8+以上版本皆能完美自适应。...viewport和响应式设计理念不同，响应式设计是一套html结构适配全平台，而viewport仅仅是给移动平台使用，并不打算兼容PC平台，如需兼容PC浏览器，需要另外写判断。...，隐藏菜单栏等，不过这类效果，必须要用户把Web添加到主屏幕上，并且通过主屏幕上面的图标进入才生效。...导航了太占位了，如何在浏览器中就隐藏掉呢 <!
核心问题是移动浏览器(Chrome和Safari)有一个“帮助”功能，地址栏有时可见，有时隐藏，改变了视口的可见大小。...这些浏览器没有将100vh的高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为隐藏地址栏的浏览器高度。结果是，当地址栏可见时，屏幕的底部部分将被切断，从而破坏了100vh的初衷。...如下所示： 当地址栏可见时，由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应该在屏幕底部的按钮被隐藏了。...如果地址栏是隐藏的，那么window.innerHeight将是屏幕可见部分的高度，正如您所期望的那样。...遗憾的是，仍然没有一种简单的方法可以让一个元素在不依赖javascript的情况下占据整个视口高度。height: 100vh是如此接近伟大，但考虑到它在移动设备上的局限性，最好避免它。
本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索，来分享移动应用界面设计中的尺寸规范等问题，希望能给移动端的新手设计师些许指引。若有不当之处，欢迎斧正。...尽管概念不同，但是对于移动设备的显示屏，可以看作ppi=dpi 。...在android规范中对于导航栏、工具栏等的尺寸没有明确的规定。...但根据48dp原则，以及一些主流的android应用的截图分析，总结一下尺寸要求： 状态栏高度：50 px 导航栏、操作栏高度：96px=48dp x 2 主菜单栏高度：96 px 内容区域高度...：1038 px（1280-50-96-96=1038） Android最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，高度也和菜单栏一样为：96 px 4、图标和字体大小（来自官方规范文档）
前端涉及到的领域不单单只是PC浏览器了，现在是移动为王的时代，所以大部分的时候还是在做移动端的页面适配。所以这里记录一下在移动端开发的时候遇到的一些问题。...1、移动端隐藏手机浏览器的地址栏以及底部的菜单栏 在设置移动端页面的宽高为100%的时候，里面的元素设置flex:1的时候，因为浏览器的地址栏以及下面的工具栏的问题会导致在有的手机上面的页面显示不全的问题...因为我们不好计算每一个浏览器的地址栏以及工具栏的高度，所以我们直接把它隐藏起来即可，下面的隐藏的代码。 <!...而跟标签（html标签）的自己大小根据手机的屏幕大小来设置。
01 触屏劫持发展过程移动智能终端设备由于体积限制，一般都没有鼠标、键盘这些输入设备，用户更多的操作是依靠手指在触屏上的点击或滑动等动作完成。...在移动设备上，类似点击劫持的攻击模式，实现了对用户触摸屏操作的劫持攻击，即界面操作劫持攻击的又一种形式——触屏劫持。2010年斯坦福公布触屏劫持攻击。...由于手机屏幕范围有限，手机浏览器为了节省空间会把地址栏隐藏起来，因此在手机上的视觉欺骗更容易实施。...据悉超过78%的Android设备受此漏洞影响。02触屏劫持技术原理1.桌面浏览器iOS中的safari浏览器可以将一个网页添加到桌面，当做一个独立的应用运行。...苹果手机在使用Safari浏览器的时候，遇到不明情况的提示框或页面，一定要确认地址栏的地址是否隐藏以及是否正确，若网站上含有触屏劫持，则大概率会添加假的地址栏做误导，需谨慎认清。
比如： iOS app的UI资源区分@1x、@2x和@3x，这就是指原始分辨率对逻辑分辨率的倍数，被称为设备像素比DPR。...桌面屏幕分辨率说明 移动设备一开始就考虑了DPR，而Windwos桌面的分辨率由于历史原因却没有这一概念， 于是Windwos引入了DPI，最初是设置DPI，后来是设置DPI比例。...媒体查询 媒体查询可用于检测很多事情 例如： viewport(视窗) 的宽度与高度 设备的宽度与高度 朝向 (智能手机横屏，竖屏) 。...对于流量较小的网站，平台的兼容策略主要是应用响应式框架(比如：normalize.css、Bootstrap 等)，加上移动端主菜单与导航栏即可，其次可以选用跨平台框架来实现在不同平台的差异化体验。...和Android用户选中文字 解决方案：-webkit-user-select:none
iOS和Android的顶部都有运行状态栏，它提供如时间、wifi连接、手机信号和电池使用状况等信息。在Android'状态栏还会显示新收的电子邮件、消息和提醒的数量。...当年苹果推出iOS 6时，把自己的地图应用捆在每一个iOS设备还上招致了不少批评呢。 网页浏览 Android使用谷歌Chrome作为其网络浏览器，而iOS 使用的是Safari浏览器。...l 操作栏：iOS导航栏通常只是一个返回按钮链接到前一个画面。 而在Android中，导航栏通常有几个操作按钮。 l 实例： Android应用程序可以灵活地进行交互操作。...Android的优劣： - 大规模的硬件选择 :有大量的Android设备可选，不同价位，不同硬件功能，不同屏幕尺寸和特性。...- 可高度可定制，改善用户体验 :主屏幕不仅可以定制的应用程序图标，还可以定制小部件，允许用户保持联系或通知。 其他的例子包括SwiftKey,修改你的Android智能手机的键盘，云云。
iPhone界面尺寸 设备 分辨率 PPI 状态栏高度 导航栏高度 标签栏高度 iPhone6 plus设计版 1242×2208 px 401PPI 60px 132px 146px iPhone6...App Store 程序应用 主屏幕 Spotlight搜索 标签栏 工具栏和导航栏 iPhone6 Plus (@3×) 1024×1024 px 180×180 px 114×114 px 87×...尺寸 分辨率 状态栏高度 导航栏高度 标签栏高度 iPad 3 - 4 - 5 - 6 - Air - Air2 - mini2 2048×1536 px 264PPI 40px 88px 98px...App Store 程序应用 主屏幕 Spotlight搜索 标签栏 工具栏和导航栏 iPad 3 - 4 - 5 - 6 - Air - Air2 - mini2 1024×1024 px 180×...手机分辨率和尺寸 设备 分辨率 尺寸 设备 分辨率 尺寸 魅族MX2 4.4英寸 800×1280 px 魅族MX3 5.1英寸 1080×1280 px 魅族MX4 5.36英寸 1152×1920
把公共的 页头 、页脚、导航栏、边框 放到最顶层，比方说设置层级为 999，其他每个独立页则放在下面，然后切换页面的时候更新独立页的层级以达到效果图的效果（当然不能超过最顶层）。...100: Chrome 标签页高度 + 地址栏高度 + 书签栏高度 2、Windows + Chrome 然后我们再看看 Windows + Chrome 的情况，以 1366 x 768 为例...， Chrome 的网页可视区高度大概为 768 - 150 = 618px 150 = 40 + 110 40: Windows 桌面底部程序坞尺寸 110: Chrome 标签页高度 + 地址栏高度...+ 书签栏高度 3、总结上面两点 以上两点的高度计算通过截图获得，可能会有些许误差。...9、移动端 移动端用户是没法操作浏览器的，所以基本上都是标准的长宽比，用 vh 最合适不过了，或 vw。
(1)type="tel" iOS 和 Android 的键盘表现都差不多 (2)type="number" 优点是 Android 下实现的一个真正的数字键盘 缺点一：iOS 下不是九宫格键盘，输入不方便...-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） --> <!...// 如需适配多种移动设备，建议使用 rem。...IOS 中情况和 Chrome 相似。 设置字体大小和行高一致，然后通过 padding 撑开大小，只给 IE 浏览器设置 line-height：-ms-line-height:40px;
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
