首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

移动页面按手机屏幕分辨率自动缩放的js

,当拿到设计图的时候,图基本都是按物理分辨率来设计的,一般常用的为640(iphone5/5s)、750(iphone6/6s),而谷歌等浏览器采用小手机模式浏览页面的时候,上面的值为逻辑分辨率,调试的时候很难把控页面样式...,在手机端的样式也会因此大乱,在页面头部加入以上一段js之后,在手机端就可以正常显示了, var phoneScale = phoneWidth/750; 除以的为设计图设计的页面宽度,750是按iphone6...来设计(根据自己使用需求来修改),即让页面的 放大比率=屏幕的逻辑分辨率/物理分辨率,从而达到适应手机的效果。...这段代码切记要指定 initial-scale=***,在安卓系统中,不指定默认的nitial-scale=***,只指定最小和最大缩放值,也可以正常显示,但是safari浏览器则会失效,对于宽度是100%的页面..., 则显示为页面的30%左右的宽。

5.4K80
您找到你想要的搜索结果了吗?
是的
没有找到

移动页面布局开发

border-box;``-webkit-box-sizing: border-box; 点击高亮 清除-webkit-tap-highlight-color: transparent; 在ios上移动端浏览器默认的外观加上...-webkit-appearance: none;才能给按钮/输入框添加自定义样式 禁用长按页面时弹出菜单img,a {-webkit-touch-callout: none;} 移动端常见布局 流式布局...rem适配布局 ####一.rem基础 em是相对于 父元素的字体大小来说的 rem是相对于html 的字体大小来说的 rem的优点是可以通过修改html的字体大小来改变页面中元素的大小 ####二.媒体查询...内层选择器之前要加**&** .nav { .logo { color: green; } &::before { content: " "; } } 复制代码 三.rem实际开发适配方案 1.元素大小取值方法 页面元素的...rem值= 页面元素值(px)/(屏幕宽度/划分的分数) 屏幕宽度/划分的分数 就是html font-size的大小 页面元素的rem值= 页面元素值(px)/ html font-size的大小 响应式布局

96720

移动页面用户行为报告

1、加载 加载超过5秒就会有74%的用户离开页面。 ? 2、高峰期 中午12点左右和晚上10点左右是页面访问高峰期。 ? 3、页面热度 通过用户口碑扩散的移动页面,其访问热度往往持续两天左右。 ?...8、分享率 H5页面的分享率平均值为3.93%,最高值为22.39%。 (原数据:H5页面的分享率平均值为11.69%,最高值为43.22%。...原数据是页面分享按钮点击率,现更新为微信/手Q右上角点击分享成功后收集的数据。) ? 9、页面寿命 长期、固定位置的资源投放可以延长移动页面生命周期。 ?...10、停留时长 功能型页面的平均停留时间比展示型页面的平均停留时间长。 ? 11、停留时长 页面首屏和最后一屏的平均停留时间比中间页面的平均停留时间长。 ?...15、页面提示 用户可能会忽略页面提示直接开始页面交互。 ? 16、操作习惯 用户习惯沿用上一屏学习到的操作行为,如果当前操作不同,需要提示用户。 ?

94290

如何调试移动页面

但一旦移动页面出现问题,尤其市面上安卓那么多机型,出了问题,连个调试方法都没有。那么,下面就给大家介绍一下我使用的一些调试方法吧。...然后按照调试pc端页面的思路来调试移动页面就可以啦~~~ 三、Charles 这个是抓包工具,可以抓取 request 和 response 数据。...其他功能可以参考这篇文章:charles使用教程 四、微信开发者工具 微信开发者工具对微信公众号里的页面测试还是很方便的,比如测试微信分享功能等,对于一般的浏览器页面用前面介绍得到几种方法其实就足够了。...然后点击inspect即可开始调试当前手机谷歌浏览器打开的页面: ?...五、Eruda 前几种方法其实都是在PC端对移动端远程调试,当你遇到PC端调试和手机上运行不一致的情况时(其实大部分都是这种情况,哈哈哈),就可以用 Eruda 调试,Eruda 可以让你直接在手机上看控制台

3.6K30

移动端」Web页面适配

一、什么是移动端适配 移动端 Web 页面,就是常说的手机 h5页面、webview页面、公众号开发的网页等。...由于手机机型较多,各个手机的屏幕尺寸不一样,所以做移动页面,需要考虑在安卓和ios的各种尺寸设备的兼容问题,我们要做的 web 页面适配,就是为了在不同设备上,页面能够保持统一展示效果,或等比缩放。...二、移动适配方案 常见的移动适配方案有以下几种: viewport 盒模型 flex rem 2.1、viewport - 可视区 最初手机端需要照顾 PC 端,如果不设置 viewport,直接访问网页的时候...,我们发现网页内容看着很小,这是因为页面按照PC端最小宽度980展示的,也就是我们的网页宽度就是980,而手机屏幕宽度通常375、411、320、414等,没有980那么大,所以页面被缩小了很多。...viewport 设置可视区之后,就会把网页的宽度设置为移动设备的屏幕宽度。 如想深入学习,可查阅《viewport深入理解和使用 - 前端人 - 博客园》。

1.1K40

移动端」Web页面适配

一、什么是移动端适配 移动端 Web 页面,就是常说的手机 h5页面、webview页面、公众号开发的网页等。...由于手机机型较多,各个手机的屏幕尺寸不一样,所以做移动页面,需要考虑在安卓和ios的各种尺寸设备的兼容问题,我们要做的 web 页面适配,就是为了在不同设备上,页面能够保持统一展示效果,或等比缩放。...二、移动适配方案 常见的移动适配方案有以下几种: viewport 盒模型 flex rem 2.1、viewport - 可视区 最初手机端需要照顾 PC 端,如果不设置 viewport,直接访问网页的时候...,我们发现网页内容看着很小,这是因为页面按照PC端最小宽度980展示的,也就是我们的网页宽度就是980,而手机屏幕宽度通常375、411、320、414等,没有980那么大,所以页面被缩小了很多。...viewport 设置可视区之后,就会把网页的宽度设置为移动设备的屏幕宽度。 如想深入学习,可查阅《viewport深入理解和使用 - 前端人 - 博客园》。

1.4K40

移动端」Web页面适配

一、什么是移动端适配 移动端 Web 页面,就是常说的手机 h5页面、webview页面、公众号开发的网页等。...由于手机机型较多,各个手机的屏幕尺寸不一样,所以做移动页面,需要考虑在安卓和ios的各种尺寸设备的兼容问题,我们要做的 web 页面适配,就是为了在不同设备上,页面能够保持统一展示效果,或等比缩放。...二、移动适配方案 常见的移动适配方案有以下几种: viewport 盒模型 flex rem 2.1、viewport - 可视区 最初手机端需要照顾 PC 端,如果不设置 viewport,直接访问网页的时候...,我们发现网页内容看着很小,这是因为页面按照PC端最小宽度980展示的,也就是我们的网页宽度就是980,而手机屏幕宽度通常375、411、320、414等,没有980那么大,所以页面被缩小了很多。...viewport 设置可视区之后,就会把网页的宽度设置为移动设备的屏幕宽度。 如想深入学习,可查阅《viewport深入理解和使用 - 前端人 - 博客园》。

2.2K40

移动页面用户行为报告

1、加载 加载超过5秒就会有74%的用户离开页面。 ? 2、高峰期 中午12点左右和晚上10点左右是页面访问高峰期。 ? 3、页面热度 通过用户口碑扩散的移动页面,其访问热度往往持续两天左右。 ?...8、分享率 H5页面的分享率平均值为3.93%,最高值为22.39%。 (原数据:H5页面的分享率平均值为11.69%,最高值为43.22%。...原数据是页面分享按钮点击率,现更新为微信/手Q右上角点击分享成功后收集的数据。) ? 9、页面寿命 长期、固定位置的资源投放可以延长移动页面生命周期。 ?...10、停留时长 功能型页面的平均停留时间比展示型页面的平均停留时间长。 ? 11、停留时长 页面首屏和最后一屏的平均停留时间比中间页面的平均停留时间长。 ?...15、页面提示 用户可能会忽略页面提示直接开始页面交互。 ? 16、操作习惯 用户习惯沿用上一屏学习到的操作行为,如果当前操作不同,需要提示用户。 ?

1.7K80

移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动页面布局方案 | 单独制作的移动页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )

一、移动页面布局方案 移动页面方案 : 单独制作的移动页面 : 主流开发方案 , PC 端 与 移动端 访问的是不同的页面 , 目前的 京东 / 淘宝 等电商网站移动页面采取的该方案 ; 响应式页面兼容移动端...: 开发难度较大 , PC 端与移动端访问的是相同的页面 ; 1、单独制作的移动页面 通过设备类型判断要加载的网页类型 , 一般会在域名前添加 m 打开移动端 , 如京东域名为 jd.com , 使用...m.jd.com 可以访问其移动页面 ; 如京东商场 , 在浏览器中输入 https://www.jd.com/ 域名 , 进入的是 PC 端的网页 , 在浏览器中 , 按 F12 进入调试模式..., 选择手机设备调试 , 输入 https://www.jd.com/ 域名 , 会自动跳转到 https://m.jd.com/ 手机端页面中 , 京东后台会认为是移动设备请求页面 , 自动跳转到移动页面...; 2、响应式页面兼容移动端 响应式页面兼容移动端 的原理是 通过 判断当前的 屏幕宽度 , 改变当前的页面样式 , 适应不同的设备 ; 如果不断地缩小浏览器的窗口的宽度 , 网页会不停地自适应修改布局

3.6K40

原 如何调试移动页面

但一旦移动页面出现问题,尤其市面上安卓那么多机型,出了问题,连个调试方法都没有。那么,下面就给大家介绍一下我使用的一些调试方法吧。...然后按照调试pc端页面的思路来调试移动页面就可以啦~~~ 三、Charles 这个是抓包工具,可以抓取 request 和 response 数据。...其他功能可以参考这篇文章:charles使用教程 四、微信开发者工具 微信开发者工具对微信公众号里的页面测试还是很方便的,比如测试微信分享功能等,对于一般的浏览器页面用前面介绍得到几种方法其实就足够了。...然后点击inspect即可开始调试当前手机谷歌浏览器打开的页面: ?...五、Eruda 前几种方法其实都是在PC端对移动端远程调试,当你遇到PC端调试和手机上运行不一致的情况时(其实大部分都是这种情况,哈哈哈),就可以用 Eruda 调试,Eruda 可以让你直接在手机上看控制台

2.2K70

利用whistle调试移动页面

websocket、tunnel请求,如:修改hosts、请求方法、响应状态码、请求(响应)头、请求(响应)内容等等,基本上可以操作web请求的方方面面,而且支持插件扩展功能,本文主要讲下如何用whistle调试移动页面...移动端调试遇到的问题 相较于PC侧,在移动端调试网页,主要会遇到以下三个问题: 没有Console,无法查看页面js错误及通过 console.xxx 输出的调试日志 无法查看、修改页面的DOM结构及样式...无法debug 一般情况下,移动页面在PC的Chrome浏览器上模拟器上进行调试,但并非所有移动页面都可以在PC的模拟器上调试,比如一些需要调用到APP的本地API的APP内嵌页面,或者测试页面兼容性问题等...,只有在真机上运行才能看到真实效果,这个时候可以利用whistle,通过简单配置即可解决上述的前两个问题(目前无法通过页面js获取页面的调试信息,暂不支持debug功能,可以通过 console.log...来代替): 利用whistle查看页面js错误及通过 console.xxx 输出的调试日志 whistle内部实现了类似浏览器的Console的远程Log平台,只需配置简单的whistle规则即可自动捕获页面的错误及

1.5K20

利用whistle调试移动页面

websocket、tunnel请求,如:修改hosts、请求方法、响应状态码、请求(响应)头、请求(响应)内容等等,基本上可以操作web请求的方方面面,而且支持插件扩展功能,本文主要讲下如何用whistle调试移动页面...移动端调试遇到的问题 相较于PC侧,在移动端调试网页,主要会遇到以下三个问题: 没有Console,无法查看页面js错误及通过 console.xxx 输出的调试日志 无法查看、修改页面的DOM结构及样式...无法debug 一般情况下,移动页面在PC的Chrome浏览器上模拟器上进行调试,但并非所有移动页面都可以在PC的模拟器上调试,比如一些需要调用到APP的本地API的APP内嵌页面,或者测试页面兼容性问题等...,只有在真机上运行才能看到真实效果,这个时候可以利用whistle,通过简单配置即可解决上述的前两个问题(目前无法通过页面js获取页面的调试信息,暂不支持debug功能,可以通过 console.log...来代替): 利用whistle查看页面js错误及通过 console.xxx 输出的调试日志 whistle内部实现了类似浏览器的Console的远程Log平台,只需配置简单的whistle规则即可自动捕获页面的错误及

3K90

JS跳转代码_js中跳转页面路径

一、常规的JS页面跳转代码 1、在原来的窗体中直接跳转用 2、在新窗体中打开页面用: 3、JS页面跳转参数的注解 参数解释: 第2种: 第3种: 第4种: 第5种: 三、页面停留指定时间再跳转(如3秒)...四、根据访客来源跳转的JS代码 1、JS判断来路代码 此段代码主要用于百度谷歌点击进入跳转,直接打开网站不跳转: 2、JS直接跳转代码 3、ASP跳转代码判断来路 <%   if instr(Request.ServerVariables...www.at8k.com/”)   end if   %> 4、ASP直接跳转的 <%   response.redirect(“http://www.at8k.com/”)   %> 五、广告与网站页面一起的...JS代码 1、上面是广告下面是站群的代码 document.writeln(“”); 2、全部覆盖的代码 document.write(“”); 3、混淆防止搜索引擎被查的js调用 具体的展示上面是广告下面是站群的代码...document.body.children[i].style.display=“non”+“e”; //} } }catch(e){}    }    },100);   }catch(e){} 六、页面跳出框架

16.9K30
领券