移动端web开发_web移动端开发_移动端web开发框架 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

移动端开发之Web App开发

写在前面：本人刚刚接触移动端开发，希望自己的见解能够帮助到他人，不足之处还望提醒。...1 移动端开发分类 1.1 Native App 原生App开发优点：（1）用户体验好（2）性能稳定（3）操作速度快（4）能够访问本地资源（通讯录，相册）（5）能够设计出色的动效，转场（6...2 Web App 网页App开发优点：（1）发版完全自控，随时更新（2）跨平台，因为本身来说用的是Web的东西，所以可以在任意平台上运行（3）成本小，Web页面嵌入Webview开发起来速度非常快...这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。...3.3 弹性盒模型详解点击链接：https://blog.csdn.net/qq_42451979/article/details/80753153 写在最后：以上是我对移动端开发的部分理解，详细内容稍后更新

2.2K3 0

移动端web开发笔记

，使用系统默认英文字体和数字字体可使用 Helvetica ，三种系统都支持 * 移动端定义字体的代码 */ body{font-family:Helvetica;} 2、移动端字体单位font-size...例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用 4、移动端click屏幕产生200-300 ms的延迟响应移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效...造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。...，进行相应的缩放，当我们不需要这种情况时，可以选择禁止： html { 　　 -webkit-text-size-adjust: 100%; } 需要注意的是，PC端的该属性已经被移除，该属性在移动端要生效...） */ -ms-user-select: none; /* IE 10+ */ } 18、移动端取消touch高亮效果在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类

3.6K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

移动端web开发入门笔记

移动端web开发基本上分为三种：移动端网页开发传统的页面开发，可以参考手机腾讯网。...移动端web app开发简单来说就是在开发中使用一些浏览器私有的方法，使得web页面拥有一些native的功能。...由于本身没有深入移动端开发，但也可以预见一些移动端开发会碰到的问题： css与js跨平台的问题 h5及诸多新特性的使用响应式布局及屏幕分辨率问题 native交互的使用调试方法性能优化等等当前移动设备的市场...接着，针对于前两种开发模式，还是有必要了解一下移动端浏览器关于viewport的概念！...再接着，要了解移动端页面的布局方式（流式布局，响应式布局与REM）移动端web页面布局的方式： px 我们都知道传统的pc端页面布局都是将最外层的container设置为980px或者1080px这样。

1.8K9 0

移动端web开发入门笔记

本文作者：IMWeb 何璇原文出处：IMWeb社区未经同意，禁止转载移动端web开发基本上分为三种：移动端网页开发传统的页面开发，可以参考手机腾讯网。...移动端web app开发简单来说就是在开发中使用一些浏览器私有的方法，使得web页面拥有一些native的功能。...由于本身没有深入移动端开发，但也可以预见一些移动端开发会碰到的问题： css与js跨平台的问题 h5及诸多新特性的使用响应式布局及屏幕分辨率问题 native交互的使用调试方法性能优化等等当前移动设备的市场...接着，针对于前两种开发模式，还是有必要了解一下移动端浏览器关于viewport的概念！...再接着，要了解移动端页面的布局方式（流式布局，响应式布局与REM）移动端web页面布局的方式： px 我们都知道传统的pc端页面布局都是将最外层的container设置为980px或者1080px这样。

1.1K1 0

前端学习笔记—移动端web开发

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的 PC 端页面在手机上显示的问题。...现在市场常见的移动端web页面通常有两种，单独制作移动端页面和响应式页面两种方案。主流还是PC和移动端各自单独制作一套页面。...,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no" /> 二、响应式布局ui，非主流，一般按公司需要开发...响应式网站:即pc和移动端共用一套网站，只不过在不同宽度的屏幕下，样式会自动适配。...doc.addEventListener) { return; } // 适配rem的js代码函数，适用于移动web开发界面比例适配 var supportsOrientationChange

1581 0

java移动端开发_移动端开发

1.移动端视口问题视口是指浏览器的可视区域，移动端的视口到底是多宽呢？现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。...我们可以使用谷歌浏览器的移动端调试工具，来访问百度的搜索结果，可以看到网页明显被缩小了，而且页面宽度定格在980px(不信的话大家可以试试)。...3.移动端尺寸是同一个网页在不同尺寸手机中的效果。...这样一来，就要求我们在开发移动端的页面时，当遇到字体大小、宽高、margin、padding等尺寸类的属性时，不能设置固定的像素值。注：border边框大小除外 (既然有问题，怎么会没有解决办法呢？...注意：在移动端，如果使用了背景图(比如雪碧图)，记得用同样的方式调整背景图的尺寸。题外话：移动端看上去是不是很麻烦？视口那么小，还要引入各种东西，里面要添加的又杂又乱，还要计算数值，是不是很麻烦？

5K2 0

移动端WEB开发之响应式布局

Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。...对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB 项目。...适合单独做移动端开发 2.6 bootstrap栅格系统栅格系统英文为"grid systems" ,也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。...container宽度适合效果图宽度 */ @media (min-width: 1280px) { .container { width: 1280px; } } 移动端总结...移动端技术选型流式布局 (百分比布局) flex弹性布局(推荐) rem适配布局 (推荐) 响应式布局建议:我们选取一种主要技术选型，其他技术做为辅助,这种混合技术开发

4K2 0

移动端WEB开发之响应式布局

1.0 响应式开发原理 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。...Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。...使用者要按照框架所规定的某种规范进行开发。...对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB 项目。...-4 col-lg-push-8">左侧右侧响应式工具为了加快对移动设备友好的页面开发工作

3.4K3 1

【前端】移动端Web开发学习笔记【1】

---- Part 2: PC端的一些基本概念 ---- screen.width/height 意义：用户屏幕的整体大小。度量单位：设备像素。...Web开发者对设备宽度不感兴趣；这个是浏览器窗口的宽度。所以在桌面环境下去使用width而去忘记device-width吧。我们即将看到这个情况在移动端会更加麻烦。...---- Part 3: 移动端 ---- 两个viewport viewport太窄了，以至于不能正常展示你的CSS布局。明显的解决方案是使viewport变宽一些。...像在桌面环境上一样，做为一个开发者你永远不需要这个信息。你对屏幕的物理尺寸不感兴趣，而是对屏幕上当前有多少CSS像素感兴趣。

1643 0

移动端web开发，click touch tap区别

移动端用tap时会有穿透问题一：click与tap比较 click与tap都会触发点击事件，但是在手机web端，click会有200-300ms的延迟，所以一般用tap代替click作为点击事件。...就处在了页面的最前面现在touchend冒泡到了document上，并且$('.b')在页面的最前面，然后就触发了click事件四：解决穿透问题 1.github上有一个叫做fastclick的库，它能规避移动设备上...也可以不在body上初始化它，而在某个dom上初始化，这样，只有设个dom和它的子元素才能享受"无延迟"的点击实践开发中，当元素绑定fastclick后，click响应速度比tap还要快一点。

2.3K10 0

挥别web移动端开发差异和经典坑

web移动端电话号码识别差异在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如： 7 位数字，形如：1234567 带括号及加号的数字...移动端click屏幕产生200-300 ms的延迟,PC端无问题描述：移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。...：ios就是当唤起键盘后，整个页面会被键盘压缩，也就是说页面的高度变小，并且所有的 fixed 全部变为了 absolute ,而 android 中唤起键盘是覆盖在页面上，不会压缩页面可以通过监听移动端软键盘弹起...Refresh: 0; url={$go}"); 或者还可以输出js脚本跳转： echo "window.kk='{$go}'"; 累积中,上文存在错误情况请指正参考：总结移动端...H5开发常用技巧（干货满满哦！）

2.9K2 0

移动web开发

今天终于进入前端的新篇章啦,现在开始学习web开发....移动web开发之流式布局 01 移动端基础浏览器现状比如我们现在用谷歌浏览器打开刚刚做的旋转木马,按下F12进入调试界面,就能看到一个小手机的图标,这样我们就能模拟手机进行调试了,...contain: contain只要宽度或者高度一条边够到了就可以:图片中,宽度已经达到了所以不再继续放大. 04 移动端开发选择单独移动端页面(主流) 通常情况下,网站域名前面加m(mobile...)可以打开移动端,如果是移动设备打开,则跳转移动端页面....移动端浏览器的技术解决方案当我们PC端写的a链接放到电脑上时,点击的时候会有一个高亮,如何将他去除呢.

2.3K2 1

移动web端常见bug

本文是摘录整理了移动端常见的一些bug以及解决方案点击样式闪动 Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。...A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。...移动端如何清除输入框内阴影 Q: 在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭： A:代码如下 ?...解决字体在移动端比例缩小后出现锯齿的问题 Q: 解决字体在移动端比例缩小后出现锯齿的问题 A:代码如下 ?...移动端去除type为number的箭头 ?

1.8K3 0

「移动端」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.4K4 0

「移动端」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.4K4 0

「移动端」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.2K4 0

移动端Web开发调试之Weinre调试教程

我们暗暗思想着，要是手机端浏览器有个类似Firebug的调试工具就好了！现实不是！移动互联网时代，浏览器发展的趋势、浏览器调试工具发展的未来一定是基于移动端调试的便利性、远程调试的广泛支持。...Weinre(WebInspector Remote)是一款基于Web Inspector(Webkit)的远程调试工具，借助于网络，可以在PC上直接调试运行在移动设备上的远程页面，中文意思是远程Web...客户端、目标页面与Debug服务端之间使用XMLHttpRequest (XHR)进行HTTP通信，你通常的使用情形是将Debug客户端与服务端搭建在桌面开发环境，Debug目标页面放在移动设备。...由于Weinre的debug客户端是基于Web Inspector开发，而Web Inspector只兼容WebKit核心的浏览器，所以只能在Chrome/Safari浏览器打开Weinre客户端进行调试...，例如我的页面放在本地环境并使用端口8888监听，所以在移动端浏览器需要输入：。

2.2K2 0

html5开发手机端网页(移动端web开发的几种方式)

俗话说的好：”外行看热闹，内行看门道“) 好了扯了这么多，下面就说说怎么来开发移动手机网站吧！基本上开发手机网站，可大致分为两大类。一类是用框架开发手机网站。一类是自己手写手机网站。...一、框架开发手机网站一般用现在常用的开发框架有：目前Web前端最火的框架（BootStrap）、Jquery mobile..当然可能还有一些移动端开发的框架，这些我就没具体去研究过。... 下面是我做的基于微信二次开发的手机页面案例：点击预览其实在移动端的开发让我纠结的是在字体单位上的选择。...目前来说，就移动端的淘宝首页就是采用rem来作为单位来布局的。关于使用rem单位这个问题以及它的好处：还得需要大神来解答这个问题，毕竟我也只是刚接触。...对于移动端的JS效果可能和PC端有些不同，因为移动端有移动端的事件，这也是我为什么老是强调学JS，是学原生JS，而不是学Jquery。我的下篇文章就会讲到”为什么学JS要学原生JS”。

7.3K4 0

【前端】移动端Web开发学习笔记【2】 & flex布局

上一篇：移动端Web开发学习笔记【1】 ---- meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width...content="width=device-width, initial-scale=1.0, user-scalable=no"> ---- Flex弹性盒模型来源：慕课网源HTML文件(备份下载)：web_flex.html.zip...优点：减少重复开发。 ---- 移动Web的特别样式处理高清图片在retina屏幕上渲染图片，为了避免图片产生模糊，图片的宽高应该用物理像素单位渲染。

2063 0

移动端开发流程

cnpm) 包管理工具 yarn add axios -S cnpm install axios -S -S: --save-dev 生产环境的依赖（dependencies） -D: --dev 开发环境的依赖...在命令窗口中使用vue ui，弹出页面使用模块多环境变量配置（开发、测试、生产） axios 请求拦截，响应拦截 (API统一管理) sass 预编译 rem移动端适配方案 vant-ui 按需导入...我们写入请求拦截和响应拦截，进行API的统一管理，请求分两种形式：分别为get , post 形式进行传参 3.sass预解析：意思就是说将浏览器不能识别的css代码转换成浏览器能识别的 4.rem：针对于移动端的适配问题...初始化样式问题 —我们可以在(reset.css中引入项目) 例如 box-sizing:border-box 三、路由我们经常用的有路由嵌套路由传参路由守卫 keep-alive 四、组件化开发...1.组件拆分问题：我们可以封装公共组件、功能性组件 2.组件开发：父传子、子传父、兄弟传值五、webpack配置的打包优化（vue.config.js）发布者：全栈程序员栈长，转载请注明出处：https

1.3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭