web前段设计之痛：手机浏览器和pc浏览器的width:100%的自适应问题
在网页的
中增加以上这句话，可让网页的宽度自动适应手机屏幕的宽度:
- <</span>meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
- <</span>meta name="apple-mobile-web-app-capable" content="yes" />
- <</span>meta name="format-detection" content="telephone=no" />
第1行：
width=device-width ：表示宽度是装备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=0.5：表示最小的缩放比例
maximum-scale=2.0：表示最大的缩放比例
user-scalable=yes：表示用户是不是可以调剂缩放比例
第2行：
设定iphone端页面全屏。
第3行：
取消数字被辨认为电话号码。
如果是想要1打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：
- <</span>meta name="viewport" content="width=device-width（这里是可以变化的，根据你的其他div的宽度来设置）, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
这模样写后，就能够把1些页头横幅等的图片的宽度都设置成style="width:100%"，全部页面在装备上看起来就是全屏的了。【要把width=device-width 中的device-width换成你中部设置的像素值，比如我的设置为1200px】 这样问题就解决了。
原文地址
http://blog.sina.com.cn/s/blog_6722e1450102vvt9.html
web前段设计之痛：手机浏览器和pc浏览器的width:100%的自适应问题相关推荐
- vue判断在安卓app、IOSapp、微信浏览器、安卓浏览器、IOS浏览器、PC浏览器下作不同处理
var browser = {versions: function() {var u = navigator.userAgent,app = navigator.appVersion;return { ...
- php取当前是pc还是手机号,PHP 获取访问用户的 IP, 地址 , 访问设备(手机还是PC)并返回手机类型和PC浏览器类型...
我这个方法比较笨 , 但是有效果 , 百度很多都是有问题的 ,基本都是获取地址的API的问题, 我用的是TP , 所以我是把方法放在common中的 , 然后首页调用, 第一个 , 获取访客IP , ...
- TP5 网站获取访问用户的 IP, 地址 , 访问设备(手机还是PC)并返回手机类型和PC浏览器类型
我这个方法比较笨 , 但是有效果 , 百度很多都是有问题的 ,基本都是获取地址的API的问题, 我用的是TP , 所以我是把方法放在common中的 , 然后首页调用, 第一个 , 获取访客IP , ...
- js判断在安卓app、IOSapp、微信浏览器、安卓浏览器、IOS浏览器、PC浏览器下作不同处理
参考路径:https://blog.csdn.net/a419419/article/details/78752417?utm_medium=distribute.pc_relevant_t0.non ...
- 手机web页面PC浏览器打开有滚动条，手机浏览器打开没有
在PC浏览器和谷歌浏览器手机模拟器里都是正常的, 用手机测试一下,只能显示一屏,不能上下滚动. 结果查看CSS,发现在CSS里有这一句: body { touch-action: none; } 把这 ...
- web课程设计网页规划与设计~在线阅读小说网页共6个页面(HTML+CSS+JavaScript+Bootstrap)...
HTML期末大作业 ~ 大学生网页设计作业成品 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 临近期末, 你还在为HTML网页设计结课作业 ...
- 【引用】 web前段学习路线
[引用] web前段学习路线 引语 自从2008年接触网站开发以来到现在已经有六个年头了,今天偶然整理电脑资料看到当时为参加系里面一个比赛而做 的第一个网站时,勾起了在这网站开发道路上的一串串回忆,成 ...
- HTML5期末大作业：家居/家电/家居网站设计——html家具装饰网站设计30页(含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机...
HTML5期末大作业:家居/家电/家居网站设计--html家具装饰网站设计30页(含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网 ...
- android手机浏览器测评,QQ浏览器和800浏览器哪个好？安卓手机浏览器对比评测
类型:网络浏览大小:630KB语言:中文 评分:10.0 标签: 立即下载 800浏览器app是一款可以省流量的手机浏览器,轻松上网,省流量.简洁,省电,省流,不驻留任何后台进程轻轻上推进入全屏,下拉 ...
- 软件创新开发基地，web前段作业（第一周）
一.第一集的笔记 1.1 课程的主要部分 HTML+CSS系列教程1之拨云见日 HTML+CSS系列教程2之朔本求源 MTML+CSS系列教程3之风生水起 MTML+CSS系列教程4之巧夺天工 1.2 ...
最新文章
- r语言中mpg数据_R语言数据筛选整理包dplyr
- 【一个实体对象不能由多个 IEntityChangeTracker 实例引用】原因及解决方法
- 【Linux sshfs】sshfs将远程目录挂载到本地目录
- 贪心算法之买卖股票的最佳时机 II
- python ==》 内置函数
- 中国计算机学会YOCSEF TDS《专题探索班》，新一代人工智能的基础与前瞻
- 统一配置数据库连接符的方法
- jenkins安装（1）
- 各数据库连接配置与maven依赖安装
- 【细节处理】LeetCode 66. Plus One
- MVVM模式下，自定义用户控件不执行COMMAND的原因
- Docker 方式搭建 Prometheus + grafana
- 阿里云盘之资源大大大福利！
- 判断两篇文章的相似度
- c语言出现错误c1083,DES 算法,出现异常：fatal error C1083: Cannot open include file: 'des_encode.h'...
- mocha——单元测试
- python读取EXCEL的方式
- 万能Markdown数学公式
- 拉依达准则剔除数据异常
- matlab图像进行变换