❝本题摘自于我 github 上的面试每日一题：https://github.com/shfshanyue/Daily-Question，并有大厂面经及内推信息 ❞ 如果 PC 端和移动端是一套代码则不会出现这个问题...「这个问题出现在 PC 端和移动端是两套代码，却共用一个域名。」...使用 nginx 配置如下，根据 UA 判断是否移动端，而走不同的逻辑 (判断UA是否移动端容易出问题) location / { // 默认 PC 端 root /usr/local/...root /usr/local/website/mobile; } index index.html index.htm; } 解决方案通常使用 Vary 响应头，来控制 CDN...Vary: User-Agent 但最好不要出现这种情况，PC 端和移动端如果是两套代码，建议用两个域名，理由如下 nginx 判断是否移动端容易出错 对缓存不友好
如果有网站的朋友，我相信都听过cdn加速器这个名词，也知道cdn加速器的一些功能是为了能够让自己的网站流畅和传输速度更快，但是cdn加速器的原理是什么？他工作的时候是什么样的状态？...一.cdn加速怎么解析 首先我们要了解这个加速器的原理，就要先了解她的工作状态，我们在使用cdn加速器的时候，其实就是通过各个分点的服务器来对所有总服务器信息进行归纳整理，然后再用户使用到这些信息的时候...在我国，有许多的cdn节点，包括联通，移动，电信，网通等等，这些服务器的节点也正是方便了这些用户在使用过程中缩短了他们的访问时间。并且也就缓解了服务器的压力。...二.cdn加速器怎么用 我们在使用cdn加速器的时候，是不用通过用户自己设置的，因为许多的网站自己都会开通cdn加速器服务，无论是这个网站基于什么样的总服务器，在开通之后都会得到较快的网速提升。...在知道cdn加速器的一些原理之后，也了解了它cdn加速怎么解析之后，更多想要去使用这项服务的朋友，也可以进行设置来提升自己网站的传输速度和完成网站使用过程中的优化。
关心cdn加速器怎么设置的朋友，我相信肯定都是遇到了这些网站卡顿以及在生活过程中无法流畅运行的问题。那么，cdn加速器到底能不能够给我们的网站带来实时的网速提升？...那么，cdn加速怎么设置？我们想要设置的时候，又该从何下手呢？ 一.cdn加速怎么设置 首先，作为网站的拥有者，我们要知道，网站开通的的服务器是哪一个。...我们只需要找到我们的总服务器，然后进行购买cdn加速服务进行配置。通过这些加速的节点，就可以享受到cdn加速服务了。但是这还远远没有结束，我们在购买服务之后，还需要进行备案。这也是非常重要的一步。...二.cdn加速器能提升多少 那么cdn加速他到底能够对我们网络优化达到什么样的效果呢？我们首先来看没有使用cdn加速的网站，在访问的时候，所需要经过哪些路径才能够得到传输出来的信息。...如果使用了cdn节点之后，就能够通过智能的调度分配，合理的网络传输信息。这也正是为什么cdn加速能够大幅度提升传输数据的原因。
1.移动端视口问题 视口是指浏览器的可视区域，移动端的视口到底是多宽呢？ 现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。...(注：实际上，这里说的375像素不是真实的物理像素，至于这个375像素是怎么来的，以及为什么大部分移动端的默认视口宽度是980，这就是另一个更加复杂的话题了，在此我们先不做讨论。)...我们可以使用谷歌浏览器的移动端调试工具，来访问百度的搜索结果，可以看到网页明显被缩小了，而且页面宽度定格在980px(不信的话大家可以试试)。...3.移动端尺寸 是同一个网页在不同尺寸手机中的效果。...注意：在移动端，如果使用了背景图(比如雪碧图)，记得用同样的方式调整背景图的尺寸。 题外话：移动端看上去是不是很麻烦？视口那么小，还要引入各种东西，里面要添加的又杂又乱，还要计算数值，是不是很麻烦？
一、移动端浏览器 ---- 移动端浏览器 比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 , 常见的浏览器如下 : UC / QQ / Opera / Chrom.../ 360 / 百度 / 搜狗 / 猎豹 国内的浏览器 基本都是 根据 Webkit 内核进行修改而来的 , 目前没有自主研发的内核 , 因此 移动端开发适配比较简单 , 兼容主流的浏览器 , 即兼容...Webkit 内核浏览器即可 ; 二、移动端屏幕分辨率 ---- 移动设备的尺寸类型非常多 , Android / iOS 手机分辨率种类很多 , 参考 Android 屏幕适配 专栏 ; 【Android...Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI ) 博客 ; 前端开发时 , 不需要关注上述 屏幕像素密度 dpi , 密度无关像素 dp , 只需要关注 像素尺寸 px 即可 ; 三、移动端网页调试方法
在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1....PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素，所以网页文字非常小，为了快速让网页还原到原来的大小，Safari最新引入了双击缩放功能...移动端特有的touch事件 由于移动端设备大都具备触摸功能，所以移动端浏览器都引入了触摸(touch)事件。...封装移动端tap事件 由于点击事件经常使用，如果用click会有延迟问题，一般我们会用touch事件模拟移动端的点击事件, 以下是封装的几个事件，仅供参考。...---- 参考文章： 移动端web开发---Touch事件详解 MDN:TouchEvent 移动端前端常见的触摸相关事件touch、tap、swipe等整理
移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一 1.移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试...是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC端页面1px就等于1个物理像素，但移动端不同 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比 3.2...4.1单独移动端页面（主流） 通常情况下，网址域名前面加m（mobile）可以打开移动端。...通过设备判断，如果是移动端打开，则自动跳转到移动端页面。...，需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 1.移动端浏览器 移动端浏览器基本以webkit内核为主，所以就考虑webkit兼容性问题。
实习期间主要在写微信端H5，遇到的最大问题就是适配各个不同尺寸的屏幕。公司就我自己一个前端，只能自己摸索着来。
移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一 1、移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 搭建本地...是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC端页面1px就等于1个物理像素，但移动端不尽相同 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比...4.1单独移动端页面（主流） 通常情况下，网址域名前面加m（mobile）可以打开移动端。...通过设备判断，如果是移动端打开，则自动跳转到移动端页面。...，需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 5.1移动端浏览器 移动端浏览器基本以webkit内核为主，所以就考虑webkit兼容性问题。
移动端基础 移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一 1.移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试...是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC端页面1px就等于1个物理像素，但移动端不同 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比 3.2...4.1单独移动端页面（主流） 通常情况下，网址域名前面加m（mobile）可以打开移动端。...通过设备判断，如果是移动端打开，则自动跳转到移动端页面。...，需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 1.移动端浏览器 移动端浏览器基本以webkit内核为主，所以就考虑webkit兼容性问题。
判断移动端或pc端 经常在项目中会有支持 pc 与手机端需求。并且pc与手机端是两个不一样的页面。这时就要求判断设置，根据不同的设置跳转不同的路由。 先写个方法： ?..._isMobile()) { alert("移动端"); //移动端跳转路由 } else { alert("pc端"); //Pc端跳转路由
一、移动端页面布局方案 移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , 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端要做一些基层的适配方案。 1....优点：布局快速简单方便、在移动设备中水平表现良好差异不大。 缺点：由于垂直方向像素恒定，可能水平很宽的屏幕会被拉伸变形严重，另外在高倍屏幕上1像素可能被多倍的物理像素显示，会变的非常粗。...2.1 横向百分比 + 纵向高度固定 首先看案例： 拉勾网移动端首页顶部的logo区域，不管如何变化浏览器的宽度，高度不变化，宽度自适应。 ?...这样优点非常多，首先开发人员直接像素还原，开发效率很高，也没有移动端1像素的问题。也是老马推荐大家使用的方式。
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1....优点：布局快速简单方便、在移动设备中水平表现良好差异不大。 缺点：由于垂直方向像素恒定，可能水平很宽的屏幕会被拉伸变形严重，另外在高倍屏幕上1像素可能被多倍的物理像素显示，会变的非常粗。...2.1 横向百分比 + 纵向高度固定 首先看案例： 拉勾网移动端首页顶部的logo区域，不管如何变化浏览器的宽度，高度不变化，宽度自适应。...这样优点非常多，首先开发人员直接像素还原，开发效率很高，也没有移动端1像素的问题。也是老马推荐大家使用的方式。
content="width=device-width"> Myself img:nth-child(2) { width: 50px; /*移动设备中的图片会被放大...style> 效果图： PC端...移动端 4....initial-scale=1.0"> Myself a { -webkit-tap-highlight-color: transparent; /*移动端点击链接会高亮
移动端轮播图功能和PC端基本一致。...功能需求： 可以自动播放图片 手指可以拖动播放轮播图 案例分析: 自动播放功能 开启定时器 移动端移动，可以使用translate 移动 想要图片优雅的移动，请添加过渡效果...，简单说就是移动端拖动元素 触摸元素touchstart： 获取手指初始坐标 移动手指touchmove： 计算手指的滑动距离，并且移动盒子 离开手指touchend: 根据滑动的距离分不同的情况...如果移动距离小于某个像素 就回弹原来位置 如果移动距离大于某个像素就上一张下一张滑动。...touchmove: 计算手指的滑动距离， 并且移动盒子 ul. addEventListener( 'touchmove', function(e) { //计算移动距离 moveX
于是屁颠屁颠的拿起了《在你身边 为你设计》这本书看了一下午，看到移动端调试这里，略有感受，于是提取了下内容。...在这个5g到来的时代，移动互联网继续横行，前端的开发工作和移动端更加紧密了，但是移动端调试着实让人尴尬。化解尴尬的方法介绍下下面这几种，有补充的欢迎留言?...尽管移动端网页与桌面端网页有诸多差异，但是说到底它还是一个在浏览器里浏览的HTML网页，所以最常用的还是在桌面借助Chrome调试器。...Chrome自带的Developer Tool对于调试移动端网页来说非常方便，可以通过调整下表所示的几个属性来调整页面。...Weinre为了能够同步桌面的调试客户端和移动设备上的调试目的，需要你搭建一个调试服务器(Debug Server)，通过这台调试服务器，可以在调试目标(Debug Target)和桌面调试客户端(Debug
在命令窗口中使用vue ui，弹出页面 使用模块 多环境变量配置（开发、测试、生产） axios 请求拦截，响应拦截 (API统一管理) sass 预编译 rem移动端适配方案 vant-ui 按需导入...我们写入请求拦截和响应拦截，进行API的统一管理，请求分两种形式：分别为get , post 形式进行传参 3.sass预解析：意思就是说将浏览器不能识别的css代码转换成浏览器能识别的 4.rem：针对于移动端的适配问题
一、rem 1、意义：当px固定宽度不能适应不同屏幕尺寸时，布局需要，从而产生rem 2、rem 和 em 区别 2...
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
