h5手机端页面横屏适配

2024-09-02

H5开发：横屏适配

平常我们做过的需求里,主要是以竖屏式为主,而横屏式较少.对于竖屏式场景来说,大家的经验会比较丰富,因此,此次主要式探讨下横屏式场景下的一些需要注意的点,特别是怎样去做横屏适配. 对于 H5 横屏页面来说,要实现横屏的话,主要是解决两点:1.无论用户手持方向如何,都需要保证屏幕横向显示.2.由于屏幕分辨率的多样化,因此就算是横屏下也是需要进行横屏适配,保证页面在所有分辨率下都能够合理适配. 强制横屏显示在横屏式 H5横屏页面中可以采取简单的措施进行处理,在页面内容按竖排方向显示时,开发者进行对用

移动端(手机端)页面自适应解决方案—rem布局篇

移动端(手机端)页面自适应解决方案-rem布局假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流程一般分为下面两种: 一.网易做法: 引入:页面开头处引入下面这段代码,用于动态计算font-size (function(doc, win) { var docEl = doc.documentElement, isIOS = navigator.userAgent.match(/\(i[^;]

H5手机端关注的问题

手机端页面写css时应该注意的问题: 设备的屏幕尺寸设备的分辨率用户的操作习惯以及点击区域的大小移动端浏览器的特性鉴于分辨率等情况而引出的图片尺寸.布局方式等诸多细节问题手机端页面调试问题如何减少用户流量流逝以及在低网速下如何保证快速打开页面在移动端制作页面时,需要考虑的点大概如下: 1.设备的系统版本号:ios,android: 2.设备中的浏览器类型以及版本:safari.uc.chrome 3.设备的分辨率 4.设备像素比 5.图片格式的选择以及图

手机端页面自适应解决方案—rem布局进阶版

手机端页面自适应解决方案—rem布局进阶版 https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/annie211/p/8118733.html 该方案使用相当简单,把下面这段已压缩过的原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport,该方案自动帮你设置) <script>!function(e){functio

【web前端】移动端控制台插件，手机端页面查看相关页面控制台信息

一般调试手机端页面时,基本是在PC端使用手机模式进行断点或console调试.或查看有用的控制台信息的,但依旧有部分功能无法在PC端调试,经常需要使用alert进行断点,然后在手机端看效果,但是这样并不好. 所以如果说有一种插件,可以在手机端查看控制台相关日志,那可比alert强多了. 最近找到了一款,还挺好用的. 插件名:vconsole 比如我们要调试一个移动端页面我们在页面中注入一段代码:引入vconsole,并创建一个控制台对象. <!--//www.wuhairui.cn/build

手机端页面自适应解决方案—rem布局（进阶版，附源码示例）

转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但随着时间的推移,该方案已然过时,故为大家介绍一个目前我极力推荐使用的,更加完美的方案——rem布局(进阶版) 另外: 此方案仅适用于移动端web 文章底部常见问题说明第四条,笔者已给出一个相当便捷的解决方案,欢迎留言交流.(2017/9/9) 该方案使用相当简单,把下面这段已压缩过的原生JS(仅1kb,源码

关于HTML5手机端页面缩放的问题

通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: <meta name="viewport" content="width=device-width,initial-scale=1"> 或者是 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5,

rem手机端页面自适应完美解决方案（最新）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> ! function(e) { function t(a) { if(i[a]) return i[a].exports; var n = i[a] = { exports: {},

PC端页面转换成手机端页面的分辨率问题的理解

PC端页面转换成手机端页面的分辨率问题的理解 px vw rem 假如就以a4纸模式为设计图 ,在a3纸模式中设计,然后设计出来展示在不同的a4纸模式上通常是 750px -> 100vw / 750px = 1.333333 rem 是转换了多大纸面积就展示多少相对的模式 , 因此, 不但能使 a3 以a4模式设计不出问题,还能让 a3 设计出的东西, 在任何a4 模式下的样子比例不变. vw - 1vw = 1%视口宽度设计图的宽度是 750像素 1125像素视口的宽度是 100vw

h5 手机端适配问题汇总

1.uc手机浏览器竟然没有 sessionstorage 醉了 2.opera 浏览器能识别 a标签中href的 javascript:; 为网址 , 55555 3.safari 的弹框如果为 fix 布局,会影响弹框中 input输入框的输入位置 4.h5中没有hover 只能通过 touchstart touchend 事件来失效某些效果, 并且这些事件和click 是重叠触发的... ------- 手机端事件总结 touchstart

手机端使用rem适配

最近一直在做手机端的东西,各种型号的手机适配很是无解.经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会有偏差但是基本是没有问题的. 因为最近也是刚刚用,还在摸索中,有兴趣的朋友可以研究下.如有问题,还请见谅.(ps只有新的页面或者项目适用,不适于用二开的项目避免发生不必要的问题) <script type="text/javascript"> var phoneW

浅谈h5移动端页面的适配问题

一.前言昨天唠叨了哈没用的,今天说点有用的把.先说一下响应式布局吧,我一直认为响应式布局的分项目,一下布局简单得项目做响应式还是可以可以得.例如博客.后台管理系统等.但是有些会认为响应式很牛逼,尤其是在不懂前端的人眼中,一味的追求响应式布局,我觉得复杂的布局项目做响应式还不如做二套样式,因为响应式的样式混在一起真的维护起来是恨费劲的.可能我说的不对,但是发表一点点自己的看法.说道这里就想说一下移动端的布局,有很多人就是想把手机端得程序兼容ipad,我就觉得这个很不可思议为什么要这么做得,命名

h5手机端下拉选择城市

<!doctype html><html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximu

手机端页面rem自适应脚本

什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么媒体查询那些的. 我们的设计图往往宽度是640或者其他尺寸的,不过我建议是用这个尺寸,以640为基准,以小到大,实现自适应,下面实现的比例为1rem=40px(640宽度). 为什么这样搞? 这样一套代码就搞定手机端尺寸自适应,不需要媒体查询,而且利用Sass和Le

自己动手丰衣足食，h5手机端jquery弹窗插件（事件冒泡、单例模式、遮盖部分禁止默认滚动）

感谢浏览,欢迎交流=.= 公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神), 手机端弹窗方式与pc端有些不同,而且手机上有一个弹窗出来滚动跟父页面滚动相互影响的问题, 于是决定写一个插件,专门对付手机网页的弹窗. 弹窗的mask和dialog两部分都做成了position=fixed,比较喜欢这种效果,并且屏蔽了被遮住部分的滚动. 几处认为需要留意的知识点或困难点: 1.事件冒泡: e.prev

手机端rem如何适配_rem详解及使用方法

什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么媒体查询那些的. 我们的设计图往往宽度是640或者其他尺寸的,不过我建议是用这个尺寸,以640为基准,以小到大,实现自适应,下面实现的比例为1rem=40px(640宽度). 为什么这样搞? 这样一套代码就搞定手机端尺寸自适应,不需要媒体查询,而且利用Sass和Less能够给我们节约更多的时间,以及

使用Fiddler调试手机端页面请求/抓包

简介 Fiddler作为一个强大的抓包工具,也是非常强大的http(s)协议分析工具,我们通常用它跟踪请求,PC端使用这里暂不做介绍(这里前提是熟悉PC端的使用),使用很简单. 那么我们如何来用它来跟踪手机端的请求呢? 配置方法准备工作 PC上安装fidder: 将电脑和手机连接到同一个Wi-Fi/局域网络中,并且保证二者是在同一个ip网段内的: 打开Fiddler在菜单栏中点击 Tools ——>Fiddler Options -> Connections 中按照如下配置,允许远程连接,同

原生js判断手机端页面滚动停止

var topValue = 0,// 上次滚动条到顶部的距离 interval = null;// 定时器 contactsList = document.getElementById("contactsList"); contactsList.onscroll = function() { //我项目中的contactsList滚动 if(interval == null) {// 未发起时,启动定时器,1秒1执行 interval = setInterval(function (

TERSUS无代码开发(笔记06)-简单实例手机端页面设计

手机端的设计 1.页面说明 2.默认页面===>提交请假单(上面页面双击进入,页面主要编辑区) 2.1默认页面===>提交请假单===>头部区(页面部份主要编辑区01) 2.1.1默认页面===>提交请假单===>头部区===>我的请假记录(点这个按钮将跳转到我的请假记录页面) 2.1.2改变按钮样式说明 2.1.3默认页面===>提交请假单===>头部区===>我的请假记录===>On Click(点击这个按钮跳转到我的请假记录表页面,这里我

关于h5手机端上拉加载和下拉刷新效果-1

1.手机端目前很火的效果,上拉加载,和下拉刷新.目前主要使用 iscroll 框架来实现.先推荐一个iscroll中文学习的网站,不要感谢,我是雷锋. 2.https://iiunknown.gitbooks.io/iscroll-5-api-cn/content/ 3.今天在上班,等晚上我再详细介绍一下,么么哒..

Css实现手机端页面强制横屏的方法示例

样式 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 @media screen and (orientation: portrait) { html{ width : 100vmin; height : 100vmax; } body{ width : 100vmin; height : 1

h5手机端页面横屏适配

热门专题