展开

关键词

java移动开发_移动开发

1.移动端视口问题 视口是指浏览器的可视区域,移动的视口到底是多宽呢? 现在市面上的大部分手机,比如iphone X,它的默认视口宽度为980px,而一个iphone X的屏幕宽度仅仅为375px。 (注:实际上,这里说的375像素不是真实的物理像素,至于这个375像素是怎么来的,以及为什么大部分移动的默认视口宽度是980,这就是另一个更加复杂的话题了,在此我们先不做讨论。) 我们可以使用谷歌浏览器的移动调试工具,来访问百度的搜索结果,可以看到网页明显被缩小了,而且页面宽度定格在980px(不信的话大家可以试试)。 3.移动尺寸 是同一个网页在不同尺寸手机中的效果。 注意:在移动,如果使用了背景图(比如雪碧图),记得用同样的方式调整背景图的尺寸。 题外话:移动看上去是不是很麻烦?视口那么小,还要引入各种东西,里面要添加的又杂又乱,还要计算数值,是不是很麻烦?

5320

10-移动开发教程-移动事件

在前端的移动Web开发中,有一部分事件只在移动产生,如触摸相关的事件。接下来给大家简单总结一下移动的事件。 1. PC事件在移动的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能 移动特有的touch事件 由于移动设备大都具备触摸功能,所以移动浏览器都引入了触摸(touch)事件。 封装移动tap事件 由于点击事件经常使用,如果用click会有延迟问题,一般我们会用touch事件模拟移动的点击事件, 以下是封装的几个事件,仅供参考。 ---- 参考文章: 移动web开发---Touch事件详解 MDN:TouchEvent 移动前端常见的触摸相关事件touch、tap、swipe等整理

1.2K70
  • 广告
    关闭

    开发者专享福利,1988元优惠券限量发放

    带你体验博客、网盘相册搭建部署、视频渲染、模型训练及语音、文字识别等热门场景。云服务器低至65元/年,GPU15元起

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

    10-移动开发教程-移动事件

    在前端的移动Web开发中,有一部分事件只在移动产生,如触摸相关的事件。接下来给大家简单总结一下移动的事件。 1. PC事件在移动的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能 移动特有的touch事件 由于移动设备大都具备触摸功能,所以移动浏览器都引入了触摸(touch)事件。 封装移动tap事件 由于点击事件经常使用,如果用click会有延迟问题,一般我们会用touch事件模拟移动的点击事件, 以下是封装的几个事件,仅供参考。 ---- 参考文章: 移动web开发---Touch事件详解 MDN:TouchEvent 移动前端常见的触摸相关事件touch、tap、swipe等整理

    1.2K80

    移动诊断工具之腾讯诊断app

    其他移动诊断工具可查看:https://cloud.tencent.com/developer/article/1489051 ---- 工具下载地址:http://imgcache.gtimg.cn /huatuo/apks/capture.apk 环境: android 常用来分析dns劫持,http 302劫持 获取客户IP,ldns,域名请求ip,请求耗时,可靠性高,信息较全 image.png 操作说明 1.手机浏览器打开 huatuo.qq.com 点击诊断app,下载腾讯诊断 或者直接用URL进行下载:http://imgcache.gtimg.cn/huatuo/apks/capture.apk image.png 2.下载诊断工具后,进行安装,然后打开“腾讯诊断” image.png 输入详细的URL ,点击开始诊断,诊断过程大概需要三分钟的样子 image.png 3.诊断完成后,会生成个报告

    1.7K70

    移动基础

    移动基础 移动浏览器我们主要针对webkit内核进行兼容 现在移动碎片化比较严重,分辨率和屏幕尺寸大小不一 1.移动调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC页面1px就等于1个物理像素,但移动不同 一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比 3.2 4.1单独移动页面(主流) 通常情况下,网址域名前面加m(mobile)可以打开移动。 通过设备判断,如果是移动打开,则自动跳转到移动页面。 ,需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动技术解决方案 1.移动浏览器 移动浏览器基本以webkit内核为主,所以就考虑webkit兼容性问题。

    11510

    移动适配

    实习期间主要在写微信H5,遇到的最大问题就是适配各个不同尺寸的屏幕。公司就我自己一个前端,只能自己摸索着来。

    34020

    移动基础

    移动浏览器我们主要针对webkit内核进行兼容   现在移动碎片化比较严重,分辨率和屏幕尺寸大小不一 1.移动调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC页面1px就等于1个物理像素,但移动不同 一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比 3.2 4.1单独移动页面(主流) 通常情况下,网址域名前面加m(mobile)可以打开移动。 通过设备判断,如果是移动打开,则自动跳转到移动页面。 ,需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动技术解决方案 1.移动浏览器 移动浏览器基本以webkit内核为主,所以就考虑webkit兼容性问题。

    16031

    移动基础

    移动浏览器我们主要针对webkit内核进行兼容 现在移动碎片化比较严重,分辨率和屏幕尺寸大小不一 1、移动调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 搭建本地 是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC页面1px就等于1个物理像素,但移动不尽相同 一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比 4.1单独移动页面(主流) 通常情况下,网址域名前面加m(mobile)可以打开移动。 通过设备判断,如果是移动打开,则自动跳转到移动页面。 ,需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动技术解决方案 5.1移动浏览器 移动浏览器基本以webkit内核为主,所以就考虑webkit兼容性问题。

    20620

    vue 判断移动、pc

    判断移动或pc 经常在项目中会有支持 pc 与手机需求。并且pc与手机是两个不一样的页面。这时就要求判断设置,根据不同的设置跳转不同的路由。 先写个方法: ? _isMobile()) { alert("移动"); //移动跳转路由 } else { alert("pc");     //Pc跳转路由

    74830

    【有奖】腾讯官网移动产品体验活动

    官网移动体验banner.png大家在移动使用腾讯官网时,都遇到过哪些体验问题呢?欢迎跟帖反馈哦,奖励多多~ 大家在移动使用腾讯官网时,都遇到过哪些体验问题呢? 欢迎跟帖反馈哦,奖励多多~ 体验对象:腾讯官网 移动 体验范围:包括但不限于 用户体验连贯性、功能可用性、易用性 等 活动时间:3月10号-4月30号 【奖励规则】 奖励对象:有效问题贡献者 *有效问题 :经评估采纳后的问题,均可作为有效问题进行评奖 奖项设置: 最佳问题奖:2名 (提出最具价值问题的同学) 奖品:腾讯100元代金券 或 周边好礼 优秀问题奖:3名 (提出高价值问题的同学) 奖品:腾讯 50元代金券 或 周边好礼 幸运奖:5名(随机抽取积极参与的同学) 奖品:腾讯30元代金券 或 周边好礼 【参与方式】 手机扫码打开腾讯官网 ,登录后进行产品体验。 扫码登录腾讯官网.png

    585111

    08-移动开发教程-移动适配方案

    由于移动的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC要做一些基层的适配方案。 1. 优点:布局快速简单方便、在移动设备中水平表现良好差异不大。 缺点:由于垂直方向像素恒定,可能水平很宽的屏幕会被拉伸变形严重,另外在高倍屏幕上1像素可能被多倍的物理像素显示,会变的非常粗。 2.1 横向百分比 + 纵向高度固定 首先看案例: 拉勾网移动首页顶部的logo区域,不管如何变化浏览器的宽度,高度不变化,宽度自适应。 这样优点非常多,首先开发人员直接像素还原,开发效率很高,也没有移动1像素的问题。也是老马推荐大家使用的方式。

    986100

    08-移动开发教程-移动适配方案

    由于移动的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC要做一些基层的适配方案。 1. 优点:布局快速简单方便、在移动设备中水平表现良好差异不大。 缺点:由于垂直方向像素恒定,可能水平很宽的屏幕会被拉伸变形严重,另外在高倍屏幕上1像素可能被多倍的物理像素显示,会变的非常粗。 2.1 横向百分比 + 纵向高度固定 首先看案例: 拉勾网移动首页顶部的logo区域,不管如何变化浏览器的宽度,高度不变化,宽度自适应。 ? 这样优点非常多,首先开发人员直接像素还原,开发效率很高,也没有移动1像素的问题。也是老马推荐大家使用的方式。

    71860

    移动返回顶部

    当页面滚动某个地方,就显示返回顶部图标,否则隐藏 点击可以返回顶部 实现代码跟pc一致 案例分析: 滚动某个地方显示 事件:scroll页面滚动事件  如果被卷去的头部(window.pageYOffset

    32440

    移动布局攻略

    作者:Tolonger 原文链接:https://www.jianshu.com/p/9e7e755ca281 除了百分比流式布局之外,rem布局占据了目前移动布局的热潮。 百分比流式布局 这里面最知名的当属bootstrap框架的思路,他所有的组件以及模板ui均是百分比流式布局,单位为px.并且我们看到的大部分对移动适配的页面也均是采用这种核心思想去做的,方法简单,多端共用 text); document.documentElement.style.fontSize = 50*ratio + "px"; })(); 响应式布局 响应式这种方式在国内很少有大型企业的复杂性的网站在移动用这种方法去做

    76060

    Vue 移动框架

    1. vonic vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动单页应用,很简约。 中文文档 | github地址 | 在线预览 ? vonic 2. vux vux 基于WeUI和Vue(2.x)开发的移动UI组件库。 Cube-UI 滴滴 WebApp 团队 实现的 基于 Vue.js 实现的精致移动组件库 中文文档 | github地址 | 在线预览 ? Mand-Mobile 面向金融场景的Vue移动UI组件库,丰富、灵活、实用,快速搭建优质的金融类产品。 中文文档 | github地址 | 在线预览 ? Onsen UI 相关文章 Vue PC框架 别走,还有后续呐······ 如果小伙伴们有比较好的移动框架,欢迎在评论区留言砸场,谢谢你的贡献。

    2.6K30

    移动滑动切换

    84650

    移动UI框架

    关于PC的UI框架是在是太多了。 react:目前常用的得数蚂蚁金服出的Ant Design了。而最新刚刚发布了4.0版本。移除了对IE9/10的支持,同时也支持 React Hook。 当然还有其他的 移动的UI框架也挺多。不过这是针对于VUE来说的。 Vant UI。有赞公司出的一套电商类的UI框架,如果是做移动电商的,想必这款UI框架用的是得心应手了吧 Muse UI。 PC的当然是首选了 Ant Design,但是H5的ant是真的没有PC的好用。所以最开始在开发移动的时候都是自己写的样式,交互体验也比较差。后面觉得是在是不行了。

    75310

    相关产品

    • 移动金融开发平台

      移动金融开发平台

      腾讯移动金融开发平台(TMF)为银行、互联网金融、保险、证券客户提供一站式、覆盖全生命周期的移动金融服务。核心服务包括APP客户端开发组件、应用加固、环境安全检测等APP开发运营关键服务,帮助金融机构低成本、高效率地打造移动金融服务…...

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券