首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

俗话说的好:”外行看热闹,内行看门道“) 好了扯了这么多,下面就说说怎么来开发移动手机网站吧! 基本上开发手机网站,可大致分为两大类。一类是用框架开发手机网站。一类是自己手写手机网站。...一、框架开发手机网站 一般用现在常用的开发框架有:目前Web前端最火的框架(BootStrap)、Jquery mobile..当然可能还有一些移动开发的框架,这些我就没具体去研究过。...二、手写手机网站 一般我们自己手动开发手机网站的话,基本可以划分两类来做到。一类是通过在网页头部添加meta标签进行实现(网页指html5的格式来开发)。... 下面是我做的基于微信二次开发手机页面案例: 点击预览 其实在移动开发让我纠结的是在字体单位上的选择。...对于移动的JS效果可能和PC有些不同,因为移动有移动的事件,这也是我为什么老是强调学JS,是学原生JS,而不是学Jquery。我的下篇文章就会讲到”为什么学JS要学原生JS”。

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

    移动开发Web App开发

    写在前面:本人刚刚接触移动开发,希望自己的见解能够帮助到他人,不足之处还望提醒。...1 移动开发分类 1.1 Native App 原生App开发 优点: (1)用户体验好 (2)性能稳定 (3)操作速度快 (4)能够访问本地资源(通讯录,相册) (5)能够设计出色的动效,转场 (6...总的来说,native app开发从android、ios智能手机出现就有了开发技术,性能体验最优,API比较完善,但是学习起来难度比较高,开发成本比较高(跟开发周期相对来说比较长也是有关系的)。...2 Web App 网页App开发 优点: (1)发版完全自控,随时更新 (2)跨平台,因为本身来说用的是Web的东西,所以可以在任意平台上运行 (3)成本小,Web页面嵌入Webview开发起来速度非常快...3 Hybrid App 混合型App开发 优点: (1)体验好 (2)稳定性强动态性强 (3)成本相对低跨平台 缺点:对团队技术栈要求相对高性能优化 Hybrid App就是Native结合Web混合开发

    2.2K30

    移动web开发笔记

    5、 移动手机号码识别(IOS) 在 iOS Safari (其他浏览器和Android均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比如: 7位数字,形如:1234567 带括号及加号的数字...,且都不支持微软雅黑 如无特殊需求,手机无需定义中文字体,使用系统默认 英文字体和数字字体可使用 Helvetica ,三种系统都支持 * 移动定义字体的代码 */ body{font-family...:Helvetica;} 2、移动字体单位font-size选择px还是rem 对于只需要适配手机设备,使用px即可 对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备...造成的后果用户纯粹单击页面,页面需要过一段时间才响应,给用户慢体验感觉,对于web开发者来说是,页面js捕获click事件的回调函数处理,需要300ms后才生效,也就间接导致影响其他业务逻辑的处理。...; /* 方法1 */   -webkit-appearance: none; /* 方法2 */ } 16、 快速回弹滚动 我们先来看看回弹滚动在手机浏览器发展的历史: 早期的时候,移动的浏览器都不支持非

    3.6K20

    移动web开发入门笔记

    移动web开发基本上分为三种: 移动网页开发 传统的页面开发,可以参考手机腾讯网。...移动web app开发 简单来说就是在开发中使用一些浏览器私有的方法,使得web页面拥有一些native的功能。...hybrid app开发(在此不谈) 简单来说就是通过写特定的代码生成跨平台的web app,类似react,phonegap,cocos2d等。...由于本身没有深入移动开发,但也可以预见一些移动开发会碰到的问题: css与js跨平台的问题 h5及诸多新特性的使用 响应式布局及屏幕分辨率问题 native交互的使用 调试方法 性能优化 等等 当前移动设备的市场...移动的viewport 我们想象一下照搬PC的模型迁移到移动端来展示,那么假设一个设备屏幕为400px的设备,展示一个流式布局的页面,宽度为10%的列将会被压缩到窄窄的一条,在手机上就会失去展示效果

    1.8K90

    移动web开发入门笔记

    本文作者:IMWeb 何璇 原文出处:IMWeb社区 未经同意,禁止转载 移动web开发基本上分为三种: 移动网页开发 传统的页面开发,可以参考手机腾讯网。...移动web app开发 简单来说就是在开发中使用一些浏览器私有的方法,使得web页面拥有一些native的功能。...hybrid app开发(在此不谈) 简单来说就是通过写特定的代码生成跨平台的web app,类似react,phonegap,cocos2d等。...由于本身没有深入移动开发,但也可以预见一些移动开发会碰到的问题: css与js跨平台的问题 h5及诸多新特性的使用 响应式布局及屏幕分辨率问题 native交互的使用 调试方法 性能优化 等等 当前移动设备的市场...移动的viewport 我们想象一下照搬PC的模型迁移到移动端来展示,那么假设一个设备屏幕为400px的设备,展示一个流式布局的页面,宽度为10%的列将会被压缩到窄窄的一条,在手机上就会失去展示效果

    1.1K10

    图扑 HT for Web 手机运维管理系统

    本文将介绍图扑 HT for Web 手机运维管理系统,在企业中提高运维效率的方法,并为运维团队带来全新的管理方式,包括维修、巡检、保养、报警以及设备台账等监管操作。...图扑软件利用自研 HT UI 通用组件开发工具包产品,打造的手机运维管理系统(移动网页应用或 Web App)。...满足不同的页面结构需求,帮助开发者快速搭建页面框架。 ■ 适配移动:提供丰富的移动组件,并支持移动手势交互等移动应用开发需求。 ■ 主题切换:支持用户按需切换主题色,以及明亮/暗黑模式。...借助 HT UI 组件库搭建手机运维管理系统或者 PC 后台管理系统,可以较大程度节省开发成本和周期。也因为是 Web 的应用软件,所以支持跨平台兼容各个操作系统,或跨设备兼容各个终端设备。...手机运维管理系统正逐渐改变着我们对运维管理的认知,为企业提供了数字化、高效率、高质量的管理方式,帮助企业提高运维效率,降低维护成本。

    39720

    2.4 电脑手机客户开发简介

    开发手机app?不会开发PC客户?不存在!会写网页几步就能实现将网页转化为PC或手机客户。     我们可以借助node.js的开源库electron开发桌面客户。...打开网页就可以直接运行H5程序,为什么要开发桌面程序呢?因为桌面程序能够访问硬件,例如我们需要读取电脑串口数据并绘图,这时H5网页程序就无能为力了。    ... 程序运行和打包     客户输入命令:electron ....electron具有“一次开发,各主流操作系统都能运行的特点”,开发效率和跨平台特性有优势。本节内容只给出了PC客户开发的基本步骤,有兴趣的读者可以自行查找教程。...同样可以使用cordova开发手机客户,由于和本教程关联度不大,就不再赘述了。

    2.3K60

    2.4 电脑手机客户开发简介

    开发手机app?不会开发PC客户?不存在!会写网页几步就能实现将网页转化为PC或手机客户。 我们可以借助node.js的开源库electron开发桌面客户。node.js是什么?...打开网页就可以直接运行H5程序,为什么要开发桌面程序呢?因为桌面程序能够访问硬件,例如我们需要读取电脑串口数据并绘图,这时H5网页程序就无能为力了。... 程序运行和打包 客户输入命令:electron ....electron具有“一次开发,各主流操作系统都能运行的特点”,开发效率和跨平台特性有优势。本节内容只给出了PC客户开发的基本步骤,有兴趣的读者可以自行查找教程。...同样可以使用cordova开发手机客户,由于和本教程关联度不大,就不再赘述了。 ?

    1.9K30

    DELPHI XE5开发WEB服务器及安卓手机客户

    Xe5开发web服务手机客户 时间:2013-9-18 17:09:45 点击: 6456 Delphi xe5作为最新开发利器,就类似如当年的DELPHI,功能强大,快发速度快,把VS2012...下面以一个小例作为您开启新的历程: 建立一个webservices stand-alone vcl application 作为手机访问的服务 1、new->other->webservices...接下来创建一个返回数据集的过程,用webservices发布,供手机调用。...我们把供手机调用的web服务完成,接下来实现手机调用webservices获取数据 1、新建firemonkey mobile application 2、选择blank application...,先启动咱们上几片文章建立的手机服务 导入webservices单元,file->new->other->webservices->选择 wsdlimporter 输入wsdl地址

    4.5K40

    新闻网站开发-手机-基于Wordpress

    暂时写下来下面记录整个网站制作流程,由于是边学便用,代码质量和性能不能保证,仅仅为之前没做过的朋友提供个小小的参考: 下面先贴出网站,记得用手机或者【Opera Mobile Emulator】打开,...静态页预览:jzdst.sinaapp.com 一、静态页 准备好网站的首页、列表页、内容页三个静态页面,一定是在手机浏览器下测试,如果手机不方便可以使用【Opera Mobile Emulator】进行测试...,不过测试中发现会出现乱码,所以最好隔一段时间在手机测试一次。...三、开发主题 这一步就是我重点要讲的地方,记录如何把静态页做成WordPress主题: 1、登录Wordpress后台,点击【文章】-【分类目录】,按照需求我建立了需要的目录,如下如所示: ?

    78240

    移动WEB开发之响应式布局

    设备的划分情况: 小于768的为超小屏幕(手机) 768~992之间的为小屏设备(平板) 992~1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 1.2...Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。...对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB 项目。...适合单独做移动开发 2.6 bootstrap栅格系统 栅格系统英文为"grid systems" ,也有人翻译为“网格系统”,它是指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局。...移动技术选型 流式布局 (百分比布局) flex弹性布局(推荐) rem适配布局 (推荐) 响应式布局 建议:我们选取一种主要技术选型,其他技术做为辅助,这种混合技术开发

    4K20

    移动WEB开发之响应式布局

    1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。...设备的划分情况: 小于768的为超小屏幕(手机) 768~992之间的为小屏设备(平板) 992~1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 1.2...父容器版心的尺寸划分 超小屏幕(手机,小于 768px):设置宽度为 100% 小屏幕(平板,大于等于 768px):设置宽度为 750px 中等屏幕(桌面显示器,大于等于 992px):...Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。...对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB 项目。

    3.4K31
    领券