专业的织梦模板下载平台,更多精品模板,超低模板价格,网站建设如此简单!           QQ好友已满,→点此获取提取码←
当前位置:主页 > 建站教程 > SEO优化教程 >

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

发布时间:2018-10-22  来源:六久阁  浏览:0  关键词:织梦PC端 网页自适应 
阿里云最新活动2折低价服务器

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

\0但是,使用默认的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端的网页自适应的显示在移动端了,而以上的参数设置也是我们移动端开发的最常用设置。

织梦二次开发QQ群

群号(383578617) DedeCMS织梦教程QQ群 如果您有任何织梦问题,请把问题发到群里,阁主将免费为您写解决教程!

相关文章

已有 0 人评论


CopyRight © 2016-2017 六久阁模板下载网 版权所有  备案号:滇ICP备15006281号-4 
本站部份内容来源自网络,文字、素材、图片版权属于原作者,本站转载素材仅供大家欣赏和分享,切勿做为商业目的使用。
如果侵害了您的合法权益,请您及时与我们,我们会在第一时间删除相关内容!