ltb8r.com

电脑pc端的网页自适应显示在移动端方法

当我们将一个pc端的网页放到移动端的时候,移动端浏览器会将pc端的网页按照一定的比例完整的显示出来,这是因为移动端的浏览器默认的会将网页渲染在一个比例比较大的viewport中排版(ios默认的是980px,Android4.0以上为980px),然后通过比例缩放看到整个页面的全貌。

默认的viewport布局会有以下缺点:

宽度不可控制,不同系统不同设备的默认值可能不同

页面缩小版显示,交互不友好

链接不可点

有缩放,缩放后又有滚动

所以,我们可以通过meta标签改变viewport得到移动端网页定制化自适应的一个效果。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no">

meta标签中参数的设置和含义如下:

width=device-width:表示布局viewport的值是设备的宽度(也可以是特定的viewport值)
initial-scale=1.0: 设置页面的初始缩放比例
minimun-scale=1.0: 设置页面的最小缩放比例
maximum-scale=1.0:设置页面的最大缩放比例
user-scalable=no: 设置用户是否可以缩放操作

通过以上meta标签的设置,就可以将一个pc端的网页自适应的显示在移动端了,而以上的参数设置也是我们移动端开发的最常用设置。

免责声明:本站所有PPT模板资源均来自用户分享和网络收集,仅供学习与参考,请勿用于商业用途,如果损害了您的权益,请联系网站客服处理
本文地址:https://www.ltb8r.com/webseo/101.html
打赏 微信扫一扫 微信扫码打赏

相关推荐

  • 百度快照 什么是百度快照? 它如何帮助SEO?

    1.什么是百度快照? 百度快照是一个基本概念,之前也曾提到过。 例如,如果您在百度上搜索 小熊吧织梦仿站 ,则搜索到的网站后面会出现百度快照。 单击第一个百度快照,顶部显示…

    08-08 09:37 177
  • 微信小程序 小程序实现简单语音聊天

    框架相关 Demo采用Mpvue框架,后端的WebSocket采用Node.js,文件服务器直接使用的微信 小程序 的云开发的存储。 储备知识 微信小程序录音控制器:recorderManager。 微信小程序音频控制器:…

    07-28 09:09 183
  • 自适应 电脑pc端的网页自适应显示在移动端方法

    当我们将一个pc端的网页放到移动端的时候,移动端浏览器会将pc端的网页按照一定的比例完整的显示出来,这是因为移动端的浏览器默认的会将网页渲染在一个比例比较大的viewport中排…

    07-02 10:26 107
  • 微信小程序 微信小程序开发组件初步使用和配置

    微信小程序基础开发详解知识,关于一些小程序的组件初步使用和配置项的讲解。…

    04-13 10:35 110
  • 微信小程序 「用户登录」微信小程序登录验证实现

    对于部分页面添加登录验证,当用户未登录时,进入页面,该页面自动转到登录页面。 成功登录验证后,回调到登录发起页面。…

    04-12 13:56 167