手机端的网站：webapp

b/s架构：
b:browser 浏览器 s:server 服务器
PC端的网站：前台、后台管理系统
手机端的网站：webapp
本质也是一个网站，这个网站运行在手机的浏览器上

c/s架构：
c:client 客户端、 s:server 服务器
一些软件：
PC端的软件、手机端软件： app application
android手机上的软件
ios手机上的软件

app的分类：
webapp: 就是运行在手机端的网站是基于BS架构
使用html+css+js就可以开发webapp
优点：
开发成本低，不需要安装，升级也比较方便，在andorid和ios上都可以运行。
缺点：体验不给力，不能调用原生接口。
nativeapp: 原生app，说白了，就是andorid和ios。
原生app，直接运行在操作系统（android或ios）上面，可以调用原生接口，体验也非常好。
优点：体验非常好，速度也非常快，访问本地资源，动画效果也比较好。
缺点：开发成本高一点，更新缓慢，上线不方便，用户还需要下载安装。
hybridapp: 混合app，原生app中嵌套h5页面
就是结合webapp和nativeapp的优缺点，来做hybrdapp。RN。

视口：

<meta name="viewport"
content="width=device-width, initial-scale=1.0,minimum-scale=1,maximum-scale=1">

如果把一个PC端网站放到的移动端，整体会被缩小。分析原因：

把PC端的网站放到移动端，分两步：
1）把PC端的网站放到一个虚拟容器中，这个虚拟容器，它的宽度是980。这个980是人为规定的，手机出厂就设置好了。
如果说网页的整体宽度是980px，那么就意味着，这个网页正好放到这个虚拟容器中。
如果说网页的整体宽度小于980px，这个虚拟容器也可以放下。
如果说网页的整体宽度大于980px，那么就会产生水平滚动条。
2）它会把虚拟容器塞到手机中。
如果说手机的宽度也是980，正好把这个虚拟容器塞进去。
不幸的是，手机的宽度在出厂时，它就固定死了。如：iphone6/7/8宽度是375。iphone5的宽度是320。iphone6/7/8plus宽度是414
也就是说，把一个980的虚拟容器，我要放到一个375或320或414的手机中，此时这个虚拟容器就会压缩后，放到手机中
你压缩了，页面上的盒子就变小了。
这个虚拟容器就叫视口。
同一个盒子，在不同的手机上，显示的大小，是取决于分辨率吗？
答：不是取决于另外一个像素，叫设备独立像素。
iphone6/7/8 设备独立像素是375，通常我们就直接说，iphone6/7/8它的宽度是375.

人为地设置虚拟容器（视口）的宽度：
为什么要人为设置？答：为了不让盒子压缩。
以iphone6为例，如果说把视口也设置成375，盒子就不压缩了。

<meta name="viewport" content="width=device-width">

结论：只要我们去写webapp，必须要重新设置视口。

视口的属性：
width 设置视口的宽度通常它的值就是device-width
initial-scale 设置页面的初始缩放值
minimum-scale minimum是最小值的意思允许用户最小的缩放值是一个数字，可以是小数通常情况下是1
maximum-scale maximum是最大值的意思允许用户最大的缩放值是一个数字，可以是小数通常情况下是1
user-scalable 是否允许用户两个手指去缩放 no 0 表示不允许 yes表示允许
height 设置视口的高度没什么卵用

可以只设置initial-scale， width=device-width 等价于 initial-scale=1.0。
答:视口 = 设置独立像素（375） / initial-scal

设置视口有两种方式：
width
initial-scale
如果这两种方式都设置了，最终以视口大的为主。

不允许用户缩放，也有两种方式：
1）user-scalable=no
2）minimum-scale=1,maximum-scale=1

手机端的网站：webapp相关推荐

商城模板网站html5手机端_网站建设中，pc端与手机移动端设计一样吗
在过去几年中,企业做网站建设基本都是做pc端的网站,原因就是pc端的网页界面显示的更多,可以对企业想要展示的图片进行更合理的布局展示.而这些年,手机逐渐智能化,很多人几乎已经脱离了电脑只使用手机,在这 ...
pc网站和手机端h5网站开发接入微信支付
有关支付类开发,现在比以前要简单很多了,微信和支付宝两大支付巨头早已经给出了非常详细的接入文档,并且迭代了好多版本,但在实际开发中其实文档的可读性还是有些磕磕绊绊的,而且也有一些坑需要注意.以微信支付 ...
VK维客众筹网整站源码手机端众筹网站系统源码
介绍: PHP+MYSQL 开发的众筹网站系统,众筹即大众筹资或群众筹资,互联网众筹作为快速筹集资金渠道的一种, 向网友募集项目资金的模式. 众筹利用互联网传播的特性,让小企业.艺术家或个人对公众展示 ...
Flask项目之手机端租房网站的实战开发（一）
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 项目源码下载一丶项目介绍产品:关于手机移动端的租房网站角色:在这个产品中用户包括房东与房客功能:房东可以在这个平台发布自己 ...
电脑端和手机端的网站SEO优化的排名是否同步?
随着移动设备的不断普及,目前移动端的流量基本上已经和pc端的流量旗鼓相当,甚者有过之而无不及.对于SEO来说,pc端的网站可以做SEO,那么移动端的同样也可以做SEO.那么针对两个不同的终端平台,是不 ...
商城模板网站html5手机端_网站建设商城模板设计排版不同，但不可缺少的重要板块都会有 - 企业建站...
有的企业建网站,是为了宣传产品.树立企业形象,此类多为建设企业官方网站:有的企业建网站,销售产品是根本,此类都建设商城网站.建设网站又有两种方法,一类模板建站,一类定制建站.对于网站建设商城模板来说, ...
Flask项目之手机端租房网站功能测试（完结）
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 目录一丶注册和登录以及用户退出功能二丶上传头像功能和修改用户名功能测试三丶发布房源以及实名认证功能测试四丶网站房屋搜索功能 ...
Flask项目之手机端租房网站的实战开发（九）
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...
有哪些优化技巧更利于手机端网站排名提升？
随着互联网的发展越来越快,手机的覆盖率也在逐渐增大,对于手机端网站来说作用也非常大,越来越多的企业也更加重视移动端网站的发展,但对于手机端的网站优化又该如何进行呢?有什么技巧呢? 一.网站内容尽可能简 ...

手机端的网站：webapp

视口：

手机端的网站：webapp相关推荐

最新文章

热门文章