webapp(web开发移动web开发)

yangyutian yangyutian     2022-12-17     261

关键词:

  总结:移动端适配方案

  技术图片

  技术图片

  技术图片

  或者直接做响应式页面,让pc端和移动端的界面排版不一样

  技术图片

  技术图片

  技术图片

 

 

  1、移动web基础知识

  移动web开发和web开发没有本质的区别:都是使用html(html5)、css(css3)、js、以及一些相关的技术在开发

  只不过移动web开发更侧重于移动端(手机、ipad)的显示,使页面在更小的屏幕上展示

  pc端主要考虑了一些不同浏览器的兼容性(绑定事件啥的),而移动端web开发我们的经历主要是在如何让我们的页面去适配不同的大小屏幕

  因为手机端的屏幕大小是非常多的,要保证页面在不同屏幕下展示正常

  人们现在更多的需求是处在移动端的---学习移动端开发的一个原因

  1、移动端开发的一些基本知识

     技术图片

     技术图片

        技术图片

      技术图片

      如果你希望在 不同的设置上图片都要展示一样品质的话,那就要为不同设备准备多张图片,而不是用一张图去放大(缩小可以,因为不会失真)

   2、移动web的调试

      a、模拟调试

        技术图片

      b、真机调试   

      技术图片

                   技术图片

        第一种真机模式可以直接通过服务器ip来访问---缺点:只可查看,不能修改页面

        第二种用第3方调试工具,先用+ 或者直接把项目文件拖进去,然后点击小箭头启动,然后再用手机微信扫码,然后点进去demo即可

         用ghostlab案例

        技术图片

 

        技术图片

2、视口的概念及设置

  技术图片

        技术图片

   因为在pc端 视口大小等于浏览器窗口大小

 技术图片

  移动端开发必设置视口---因为页面会缩放所以要让视口宽度等于设备宽度

  技术图片

  技术图片

  最终写法:技术图片

        技术图片

 

浅淡html5移动web开发

...目组的人都是第一次,最初立项的时候为是选择nativeapp和webapp还争论了一番,最后综合考虑,我们选择了web(我们选择了h5)开发。但从这两种开发模式的特点来说,从它们诞生之日起就开始了不断的争论,孰好孰坏,本文不作... 查看详情

web前端培训课程都学习啥内容?

...重构内容包含了:PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目2.第二阶段:JavaScript高级程序设计内容包含:原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目3.第三阶段:P... 查看详情

webapp开发需要啥软件

我在百度看见webapp开发大赛,需要什么软件,有什么要注意的,好的话有加分参考技术A介绍几个web开发需要的基础工具:KendoUI:webAPP界面设计工具。KendoUI拥有统一测试,支撑框架下所需要的所有工具。使得专注于创建自己的应... 查看详情

3种方式教你轻松创建webapp

...因素,许多公司会选择开发快速、维护便捷且成本更低的webapp。  AppCan与webapp 移动云平台AppCan在为开发者提供简单高效的Hybrid混合模式App开发服务的同时,也兼备了webapp开发模式,且在分辨率 查看详情

ic卡读卡器web开发静态调用ocx和动态调用ocx的区别

WebApp是一种新出现的基于WEB形式的类应用程序,运行在高端的移动终端设备上,其应用范围会越来越广。开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP;一种是基于高端机的浏览... 查看详情

如何设计和实现一个webapp

webapp简介webapp其实不算是什么新鲜的东西,相比于传统的web和传统的app,webapp这种web和app相结合的产物有的优点如下:1.开发上webapp更有便捷性,ios开发一上来需要安装一堆东西,android开发也差不多,另外webapp的学习成本要比平... 查看详情

app开发需要了解的基本技术

...可以根据自己的需求选择不同的App开发。一App有哪些形式WebApp:简单来说,WebApp就是针对iOS/Android优化后的web站点,用户不需要下载安装即可访问。一般的web站点测重使用网页技术在移动端做展示,包括文字,视频,图片等,而W... 查看详情

混合开发

...ridAPP 小杂种APP,混合APP 对比现在流行的三种APP:WebAPP,NativeAPP,HybridAPP WebAPP:*不需要下载安装,通过移动端浏览器来访问*HTML5+CSS3+JS;Web前端开发人员*开发成本低,更新维护迭代成本也很低,使用成本低,跨平台*较... 查看详情

Webapp 和移动应用程序使用的 Spring API

】Webapp和移动应用程序使用的SpringAPI【英文标题】:SpringAPIconsumedbyWebappandmobileapp【发布时间】:2018-02-0801:21:46【问题描述】:我有一个使用Angular2开发的web应用程序和一个使用Springboot开发的RestAPI。MmeMichu--->WebApp(Angular2-Knownorig... 查看详情

常用移动web开发框架--转载

 阅读目录1.1jQuerymobileflat-ui主题1.2jQuerymobileBootstrap主题4.1 GMU 4.2 Clouda+ 4.3efe  5.1 Spirit5.2FrozenUI   纯粹的总结一下移动web开发框架,移动web开发框架有jQueryMobil 查看详情

禁用移动默认键盘以显示(Web APP,而不是 APP)

】禁用移动默认键盘以显示(WebAPP,而不是APP)【英文标题】:DisableMobiledefaultkeyboardtoshowup(WebAPP,notAPP)【发布时间】:2013-02-2602:59:00【问题描述】:我开发了一个JavaScript虚拟键盘,并计划不使用默认的移动键盘。但是,每当我... 查看详情

移动web开发笔记(代码片段)

移动web开发笔记移动web开发笔记基础概念像素单位CSSpixels与devicepixelsCSSpixelsPPIDPIdevicePiexelRatio文字大小控制viewport响应式布局原则实现方式布局方案百分比布局流体布局弹性flexible布局flex-box布局图片处理普通设置响应式图片媒体... 查看详情

移动端web开发基础知识(代码片段)

文章目录移动端Web开发移动端基础浏览器视口样式编写分辨率和设备像素比二倍图SVG矢量图移动端Web开发移动Web开发的两种主流方案,一种是单独制作移动端页面,另一种是制作响应式页面移动端页面:单独制作移动... 查看详情

移动端web框架(html5手机框架)

...用,并且能兼容到iOS6.0+和Android4.0+,非常适合开发跨平台WebApp。轻量的UI库SUIMobile非常轻量,核心库压缩Gzip后的JS、CSS网络传输体积总共只有52K,却提供了20 查看详情

jquerymobile怎么样?

...的.  其相关的接口和使用的页面样式都是为了达到让webapp更趋向于nativeapp的目的.  可以理解为jquery是为了传统web而生,而jquerymobile相当于jquery的扩展,是为了让传统的web更像现在的手机应用. 查看详情

移动端页面开发流程

...序  混合使用原生的程序和html5页面开发的手机应用3、WebApp基于Web的app手机应用程序  完全使用html5页面加前端js框架开发的手机应用二、Viewport视口 查看详情

移动端web开发前端知识整理

...15/05/14/mobile-web-front-end-collections/ 最近整理的移动端Web开发前端知识,不定期更新。HTML5可以做什么拍照获取地理位置手势canvas绘图和动画(硬件加速)localstorage,本地缓存HTML5动画效果demohttp://fff.cmiscm.com/#!/mainCS 查看详情

移动端web怎么循序渐进地开发一个移动端页面

1.移动页面开发基础1.1像素——什么是像素像素是Web页面布局的基础,那么到底什么才是一个像素呢?像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。这是像素的概念,实际上,Web前端开发领域,像素... 查看详情