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的大小 响应式布局
一、移动端页面布局方案 移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端 与 移动端 访问的是不同的页面 , 目前的 京东 / 淘宝 等电商网站移动端页面采取的该方案 ; 响应式页面兼容移动端...: 开发难度较大 , PC 端与移动端访问的是相同的页面 ; 1、单独制作的移动端页面 通过设备类型判断要加载的网页类型 , 一般会在域名前添加 m 打开移动端 , 如京东域名为 jd.com , 使用...m.jd.com 可以访问其移动端页面 ; 如京东商场 , 在浏览器中输入 https://www.jd.com/ 域名 , 进入的是 PC 端的网页 , 在浏览器中 , 按 F12 进入调试模式..., 选择手机设备调试 , 输入 https://www.jd.com/ 域名 , 会自动跳转到 https://m.jd.com/ 手机端页面中 , 京东后台会认为是移动设备请求页面 , 自动跳转到移动端页面...; 2、响应式页面兼容移动端 响应式页面兼容移动端 的原理是 通过 判断当前的 屏幕宽度 , 改变当前的页面样式 , 适应不同的设备 ; 如果不断地缩小浏览器的窗口的宽度 , 网页会不停地自适应修改布局
但一旦移动端页面出现问题，尤其市面上安卓那么多机型，出了问题，连个调试方法都没有。那么，下面就给大家介绍一下我使用的一些调试方法吧。...然后按照调试pc端页面的思路来调试移动端页面就可以啦～～～ 三、Charles 这个是抓包工具，可以抓取 request 和 response 数据。...其他功能可以参考这篇文章：charles使用教程 四、微信开发者工具 微信开发者工具对微信公众号里的页面测试还是很方便的，比如测试微信分享功能等，对于一般的浏览器页面用前面介绍得到几种方法其实就足够了。...然后点击inspect即可开始调试当前手机谷歌浏览器打开的页面： ?...五、Eruda 前几种方法其实都是在PC端对移动端远程调试，当你遇到PC端调试和手机上运行不一致的情况时（其实大部分都是这种情况，哈哈哈），就可以用 Eruda 调试，Eruda 可以让你直接在手机上看控制台
一、什么是移动端适配 移动端 Web 页面，就是常说的手机 h5页面、webview页面、公众号开发的网页等。...由于手机机型较多，各个手机的屏幕尺寸不一样，所以做移动端页面，需要考虑在安卓和ios的各种尺寸设备的兼容问题，我们要做的 web 页面适配，就是为了在不同设备上，页面能够保持统一展示效果，或等比缩放。...二、移动适配方案 常见的移动适配方案有以下几种： viewport 盒模型 flex rem 2.1、viewport - 可视区 最初手机端需要照顾 PC 端，如果不设置 viewport，直接访问网页的时候...，我们发现网页内容看着很小，这是因为页面按照PC端最小宽度980展示的，也就是我们的网页宽度就是980，而手机屏幕宽度通常375、411、320、414等，没有980那么大，所以页面被缩小了很多。...viewport 设置可视区之后，就会把网页的宽度设置为移动设备的屏幕宽度。 如想深入学习，可查阅《viewport深入理解和使用 - 前端人 - 博客园》。
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规则即可自动捕获页面的错误及
通过 给视口设置固定的宽度，浏览器对页面自动缩放来实现页面的适配效果 优点是可以使用px布局，不用额外进行rem或者vw等等单位的换算了 缺点是如果是无滚动条的页面在某些设备上...是无滚动条页面的示例； 新建一个html文件将demo复制过去在浏览器打开即可 demo1 <!...注：下面的js中的0.6跟css媒体查询中的3/5 (3➗5=0.6 )就是宽高比 这个宽高比我是通过chrome的移动设备模拟器来得出的，即将设备类型调整为responsive，然后手动去调整得到一个最小的可展示内容区域的宽高比...，以此demo为例，调整之后看下div 008的位置是否在页面内即可 <!...min-aspect-ratio: 3/5) { body, html { width: 750px; margin: 0 auto; } } //移动端版本兼容
移动端页面rem 写移动端页面最麻烦的是什么，不同分辨率的适配！...可以通过js来设置，一般需要在页面dom ready、resize和屏幕旋转中设置 document.documentElement.style.fontSize = document.documentElement.clientWidth...弹性布局可以算作响应式布局的一种，但响应式布局不是弹性布局，弹性布局强调等比缩放，100%还原；响应式布局强调不同屏幕要有不同的显示，比如媒体查询 一些偏向app类的，图标类的，图片类的，比如淘宝，活动页面...html { font-size: 32px; /* 320/10 */ } body { font-size: 16px; /* 修正字体大小 */ /* 防止页面过宽...*/ margin: auto; padding: 0; width: 10rem; /* 防止页面过宽 */ outline: 1px dashed
下面来逐步看看京东移动端页面是怎么编写构成的。 首先来看看京东的移动端页面，如下： ? 只要搜索京东，然后F12设置移动端浏览器显示，刷新一下浏览器就可以看到这个移动端的呈现方式的了。...本篇章不写太多，先来完成整体页面上中下三大部分的布局设置。 ? 注意：微信展示问题 如果将这三个部分直接在body里面编写固定定位，这样下面的那部分会在微信出现无法点击的情况。...截屏京东移动端的页面，放入Photoshop，方便量取尺寸和取色 按照大小100%来截取。 ? ? 使用Photoshop打开，如下： ?...overflow-y: auto; overflow-x: hidden; 好啦，这样移动端三大部分的布局就完成了。先提交代码，下一个篇章继续。
PC端、移动端的页面适配及兼容处理 一、关于移动端兼容性 目前针对跨终端的方案，主要分为两大阵营：一套资源Vs两套资源。...思路二:通过终端判断分别调取两套资源以适配所有终端 优势：可根据不同端做个性设计及个性化信息推送且可按需加载，如移动端可配合重力感应、不同手势做各种炫酷拽效果，pc页面可不受流量限制做适合pc端的效果。...技术选型：zepto（或xui等移动端轻量级框架）+ 响应式 + 前端模块加载器 + css预处理器 + 终端适配。...zepto作为jquery的移动端版本，依然延续其自身优势，大幅优化了移动端API且摒弃了兼容”非现代浏览器”的冗余代码，成为移动端轻 便可用的js框架代表，对于习惯了jquery的同学来说简直是不二之选...User-Agent嗅探，即Web浏览器发送一个Web页面或资源请求时，会发送一个User-Agent首部作为HTTP请求的一部分，那么我们就可以在服务器端获取想要的信息，进而判断并引导用户到达相应的页面地址
❝本题摘自于我 github 上的面试每日一题：https://github.com/shfshanyue/Daily-Question，并有大厂面经及内推信息 ❞ 如果 PC 端和移动端是一套代码则不会出现这个问题...「这个问题出现在 PC 端和移动端是两套代码，却共用一个域名。」...使用 nginx 配置如下，根据 UA 判断是否移动端，而走不同的逻辑 (判断UA是否移动端容易出问题) location / { // 默认 PC 端 root /usr/local/...「此处可以使用 Vary: User-Agent ，代表如果 User-Agent 不一样，则重新发起请求，而非从缓存中读取页面」 Vary: User-Agent 当然，User-Agent 实在过多...Vary: User-Agent 但最好不要出现这种情况，PC 端和移动端如果是两套代码，建议用两个域名，理由如下 nginx 判断是否移动端容易出错 对缓存不友好
在web开发中，有时候我们需要实现在页面上点击某个按钮弹出窗口，并禁用页面滑动或滚动的需求。以下是我本人的做法，望大家多多提出意见或建议。 直接上代码： 移动端弹框禁止背景滑动 <
问题描述 移动端项目，当前页面只有一个输入框，填充内容后，点击提交，键盘落下，页面未落下 后续会有弹框，页面如果未落下，则弹框展示有问题，切点击弹框按钮不起作用 image.png image.png...image.png 页面布局 页面整体不要设置 height:100%;overflow:hidden; 否则安卓端 点击input，页面不会上顶，也无法滚动，可能会遮挡【兑换】按钮，需要先收起键盘...} } 解决方案 第一种 （网上流传的方法，但对我不起作用） $("input").on("blur",function(){ window.scroll(0,0);//失焦后强制让页面归位
{ font-size: 10px; } p{ width: 2rem; /* 2*10 = 20px;*/ margin: 1rem; } rem来做适配 以前我们往往这样做页面...根据这最小宽度来做页面。单位使用px和百分比。在宽度不同的设备上，页面的字体大小，内容尺寸都是一样的，不同的是，大屏的内容间的空隙比小屏的大。...所以这样做的缺点就是，页面在某些尺寸的设备上显示的效果不好。 如果用rem来页面，我们会根据不同的设备宽度在根元素上设置不同的字体大小。宽度越宽，字体越大。然后对原本使用px的地方使用rem来替换。...为了能将设计稿中的 px 方便的转换为页面中 rem，我设置 1rem 为 宽度为 640px 的设计稿中的 100px。...代码见这里 2 做页面时 将设计稿的宽度缩放至 640px。在上一步中，1rem 为此时设计稿中 100px 的值。屏幕的宽度也就是 (640 / 100) = 6.4rem。
1.实现方式和效果 前段时间需要做一个在PC端预览移动端的功能，由于我是前端不太好，就在网上查找资料，花了半天的时间终于有所收获，在这里把我的实现代码分享给大家。...想要在PC端实现模拟手机环境的预览效果，一般有两种方法，一种通过iframe实现，一种通过div实现的，这里我选择了后者。实现的效果如下： ?...type="text/javascript"> /** 弹出iframe页面...Alpha(Opacity=30);/* IE */-moz-opacity:0.4;/* Moz + FF */opacity: 0.4; '/>").prependTo('body'); //添加移动预览的
如果不是在移动端的话，建议使用SVG格式，更为清晰。 两个插件个人更喜欢 domtoimage ~ DEMO: https://codepen.io/CandyQiu/pen/XzmGNL?
最近公司要开发一个移动端的养成类网页游戏（就是用手点各种按钮最后你会找到一个女朋友=。=），要求横屏显示，不能竖屏。 有经验的你肯定知道，当用户竖屏打开时，提示说你要把手机转过来是在是件很蠢的事情。...好了我的测试页面结构如下： 很简单对不对，最终的理想状态是，把lol非常和谐的横过来。 好了来看看区分横屏竖屏的css： 说白了，是要把print这个div在竖屏模式下横过来，横屏状态下不变。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
