学做网站培训课程介绍

当前位置:

怎么PC网站自动缩小手机全屏宽度显示

很多网站之前只制作了唯一的PC端网站,没有做自适应手机网站,这样用户访问网站时,就会显示PC端版面,导致在手机端只能显示出网站的一部分。如下图:

PC网站在手机端显示不全

如何解决PC网站在手机端显示不全的问题呢?下面学做网站论坛为广大学习网站制作课程的学员提供二种方法:

方法一:制作与PC网站同步的手机端网站。

制作一个与PC网站同步的手机网站,通过代码判断用户的浏览设备是手机还是电脑,并显示相应的网站版面。

制作手机端网站常用的方法是使用Bootstrap自适应前端框架。详细制作方法见:自适应手机网站制作课程

如:学做网站论坛就是制作了一个与PC网站内容都同步的手机网站版面,可以自动识别浏览者的浏览设备。

学做网站论坛手机站版面

方法二:使用META属性控制PC网站版面在手机端全屏显示。

如果不想制作手机端网站,可以通过meta属性来控制PC端网站全屏显示。使用meta name="viewport" 属性来强制PC端网站在手机端显示的尺寸。

方法很简单,只需要将下面的代码放到自己PC网站代码的</head>标签上方即可。


<meta name="viewport" content="width=device-width, initial-scale=0, maximum-scale=0, user-scalable=yes,shrink-to-fit=no">

注意是0,不是1.0。

有的浏览器会出现不兼容的情况,可以加上以下的CSS代码:


html,body{width:1562px;overflow-x:hidden;margin:0 auto}

让我们自己放了这段代码后,PC网站用手机打开时的样子,PC网站在手机端显示正常了。
PC网站在手机端显示正常

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 问:现在手机这么流行,很多人都使用手机上网,如果做了网站之后,怎么做一个网站的手机客户端呢?答:1、要将网站做成手机APP的话,到应
  • 学习了老师的建站课程之后,我陆陆续续建了几个网站。但是多数都是PC端网站,近期要建一个wap手机网站。本想用仿站课程来仿,但昨天无意中看到这一个w
  • 网页如何添加背景音乐 视频教程附件下载 (1116827 次浏览)
    在上网过程中,有很多网站打开后会自动播放背景音乐,而且只有当关闭网页之后背景音乐才会停止。在我们自己建网站,同样也可以给自己的网页添加背
  • 通过网页制作教程上节课怎样在网页中添加表格,我们就可以在网页中插入一个表格,但往往插入的表格并不美观,我们需要设置一些表格参数去达到我们要求
  • 新手网站制作教程,免费网站制作视频教程零基础学做网站课程介绍网站制作流程是什么什么是网站域名什么是网站空间
  • template/default/common 模板公共文件夹,全局相关|--block_forumtree.htm 树形论坛版块分支js文件|--block_thread.htm 特殊主题的风格模块文
  • 高仿phpcms门户网站主题 图文教程 (19310 次浏览)
    这款wordpress cms主题是高仿phpcms,信任很多人都用过phpcms,如今运用wordpress也能够完成这样的作用。本站发布过很多高仿wordpress主题,例如高仿b
  • 随着智能手机的普遍使用,移动互联网用户的数量随之猛增。当我们关注PC电脑网站制作的时候,一定不要忘了制作一个手机网站。这样我们的网站用户就可以
  • 什么是自适应手机网站 视频教程 (1103312 次浏览)
    以下为学做网站论坛关于“什么是自适应手机网站”讲解视频教程。
  • 老师你好,我前几天一直在学习手机站课程,对于课程中的案例网站特别喜欢,自己就跟着课程一步步做了一遍。也做了课程笔记,感觉学到了很多知识。
  • 第一个问题:引用土豆的视频到自己网站 怎么不能全屏?能在网页观看但不能全屏?求大神帮帮忙第二个问题:在自己网站单独弄个播放器怎摸弄 请各位
  • 在我们学做网站的过程中,通过图片的后缀名我们很轻松的了解图片是什么格式的,想要替换的时候,很就简单了。但有的同学的电脑里的图片等文件并没
  • 很多同学在模板制作的过程,都有图片调用不出来的现象,其实原因很简单,就是图片路径错误造成的。这里涉及到html和css中的一些路径知识,这个视