JQuery Mobile 手机显示页面偏小

最新推荐文章于 2022-02-27 22:17:15 发布
原创 最新推荐文章于 2022-02-27 22:17:15 发布 · 8.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #mobile #手机 #css

本文详细介绍了在使用jQueryMobile开发网页时，由于未正确配置页面视口元标记而导致的布局异常问题，以及如何通过添加<meta name=viewport content=width=device-width, initial-scale=1/>解决此问题的全过程。通过本文，读者可以了解到页面视口元标记的重要性及其在响应式布局中的应用。

今天第一次用JQuery Mobile做了个3个手机小页面，一个登陆页面、一个列表页面和一个表单页面，页面中的组件呈现一切正常。

但出现了一个奇怪的问题，登陆页面大小正常，到了列表页面和表单页面就显得非常小，对比各种CSS样式，完全没问题。

花了1个小时中发现，原来在页面head中少了一句话

<meta name="viewport" content="width=device-width, initial-scale=1" />

这句话其实在官方指导文章上貌似也看过是很重要的，奈何刚使用，还是给遗漏了

基于智能手机的报纸阅读器-论文
huaying0的博客
04-02 3446
源码下载 http://www.byamd.xyz/hui-zong-1/ 摘要 近几年来，智能手机的迅猛发展给人们的生活带来了极大的改变，移动互联网时代的来临使得人手拥有一台配置强悍的智能手机已不再是奢望。但随着社会老龄化问题的日益严重，智能手机市场对老年人市场的投入却依旧跟不上时代发展的步伐。老年人由于视力衰退，阅读报纸上的文字较为吃力，长时间戴眼镜更会加剧眼睛的疲劳状况。本设计提出了用智能手机帮助老年人阅读报纸的可能，并实现了一款基于 Android 智能手机的应用。 本设计实现了一款基于安卓智
最全面、最详细web前端面试题及答案总结
热门推荐
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
一些关于Viewport与device-width的东西～
weixin_30374009的博客
11-01 636
进行移动web开发已经有一年多的时间了，期间遇到了一些令人很困惑的东西。比如： 我们经常使用的<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">里的viewport究竟是什么意思，...
关于HTML5的viewpoint用法
weixin_42636959的博客
03-05 1026
viewport 语法介绍：     width 控制 viewport 的大小，pixel_value表示可以指定的一个值或者特殊的值，而device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height 和 width 相对应，指定高度。 target-densitydpi 一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
08-29
主要介绍了移动客户端手机页面布局时各标签元素作用和适用情景，通过详解几种属性让读者更明确自适应布局的注意点，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
分析<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable
salestina的博客
09-30 2303
width:可视区域的宽度，值可为数字或关键词device-width。 height:同width。 intial-scale:页面首次被显示时可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放。 maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别 maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实
<meta name="viewport" content="width=device-width, initial-scale=1">
技术之旅：一位项目管理者的编程视角与项目管理洞见；
03-23 783
也就是 显示窗口 宽度 是 客户端的 屏幕 宽度 （就是 满屏 ！），显示的文字和图形的初始比例 是 1.0 --> 也是就是 会出现一个窗口 然后 会自动适应屏幕的宽度
jQuery EasyUI 1.4.4 前端框架资源包
`jquery.easyui.mobile.js` 则是专为移动设备优化的扩展文件，增强了触摸支持和移动端适配能力，使 EasyUI 可以在手机和平板上良好运行。 `changelog.txt` 记录了该版本相对于之前版本的更新内容，包括新增功能、...
Django 04 ：靓号管理【 靓号的增删改 + 搜索 + 分页 + 时间插件 + ModelForm与BootStrap】
DLNovice的博客
02-27 2565
文章目录1、用户管理：编辑与删除1.1、编辑用户（1）前端基础效果（2）提交（3）补充知识1.2、删除用户2、靓号管理2.1、数据库的表结构2.2、靓号列表2.3、靓号：新建、编辑、删除（1）新建靓号优化（添加验证）验证方式1：字段+正则表达式验证方式2：钩子方法（2）编辑靓号（3）删除靓号（4）优化：编辑靓号（5）优化：手机号不可重复总结2.4、搜索靓号2.5、分页（1）先造点数据（2）页码前端效果（3）分页2.6、分页组件的封装使用分页组件3、时间插件（1）首先，引入插件（2）实现效果4、ModelFo
＜meta name=“viewport“ content=“width=device-width, initial-scale=1, maximum-scale=1“＞
qq_45633812的博客
04-15 6543
移动端和pc端不同。现在手机屏幕分辨率越来越高，但屏幕大小并没有太大的变化，这意味着每个物理像素里装了多个实际像素。 还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。 所以在做移动端开发时，为了使移动端的页面在不同的手机上同样的大小来显示，我们可以将页面的宽度固定，然后获取设备的宽度，可以得到我们之前设定的宽度与设备宽度的比例，再使用HTML5新增的viewpo
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
10-27
jQuery解决IE 6/7/8 BUG：下拉框select设宽度时option超出显示不全，经过修改效果还不错，遇到类似情况的朋友可以参考下哈
jQuery 解决 IE 6/7/8 BUG：下拉框select设宽度时option超出显示不全
weixin_30565327的博客
05-22 235
该代码原文来自：惊寒唱晚 个人做了一些自定义的修改 <!--[if lt IE 9]><script type="text/javascript"> jQuery(function($){ var el; $("select").each(function() { el = $(this); el.data("origWidth", ...
select2的宽度样式问题
zhen3368的博客
12-18 6414
转载自 select2的宽度样式问题 作者 姜瑞涛 根据select2的官方文档做练习，做的是 basic usage这个最简单的例子。做这个练习的时候发现，浏览器展示下拉选的样式不正常，宽度非常窄，也正常使用了select2自身CSS文件和jquery，不知道是什么原因导致的该问题。如下图 select2的宽度样式问题-姜瑞涛 下面是代码 Document ...
讲述下拉框自己的故事——解决html的select(下拉框)宽度问题
【头号恶魔】
09-04 1724
我们经常要使用select ，但select的大小会随着内容的大小而变化。很烦人啊。 网上有人说用层来替代，这个方法是可行的，就是觉得有点麻烦。 本人喜欢投机取巧。。呵呵 所以想了个懒办法--用脚本控制 当select被点击（onclick或者onchange）的时候调用脚本函数改变这个select的width值 当select失去焦点（onblur）的时候再一次调用脚本恢复这个sele...
jquey写的select下拉插件 解决了自带option宽度不能改变的问题
知了的博客
07-30 987
1,html代码 [code="java"] $(document).ready(function () { $("#selectId").selectAuto({ title:"所有分类", ...
使用meta标签的【viewport】控制在移动设备上的布局
精彩人生
02-10 1544
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大
content="width=device-width,initial-scale=1"
bujiongdan的博客
08-04 1万+
&lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=...
详解meta-viewport标签中的width和initial-scale属性
leman314的博客
12-29 2万+
视口 视口可以理解为设备或文档对象的逻辑尺寸。 前端ppk大神认为，移动设备上有三个viewport（视口）。 但可以换句话说，可以缩放的浏览器中都具有三个视口概念，分别是 布局视口、视觉视口、理想视口。 1. 布局视口 layout viewport 布局视口可以理解为文档对象的逻辑尺寸，单位为逻辑像素（CSS像素）。 在PC端上，布局视口宽度默认等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，就会出现滚动条。 由于
jquery mobile 跳转之后页面大小不适应手机屏幕
07-14
您好！对于jQuery Mobile跳转后页面大小不适应手机屏幕的问题，可以尝试以下几种解决方法： 1. 使用viewport meta标签：在HTML文件的头部添加以下代码，以确保页面适应手机屏幕大小。 ```html <meta name="viewport" content="width=device-width, initial-scale=1"> ``` 2. 禁用缓存：在跳转页面的链接中添加`data-ajax="false"`属性，以禁用jQuery Mobile的缓存功能。 ```html <a href="nextpage.html" data-ajax="false">跳转到下一页</a> ``` 3. 手动刷新页面布局：在跳转后的页面中，使用`pagecreate`事件或其他适当的事件来手动刷新页面布局。 ```javascript $(document).on('pagecreate', function(){ $(window).trigger('resize'); }); ``` 4. 使用jQuery Mobile提供的方法进行页面刷新：在跳转后的页面中，使用`enhanceWithin`方法来刷新页面布局。 ```javascript $(document).on('pagecontainerchange', function(){ $.mobile.pageContainer.pagecontainer('enhanceWithin'); }); ``` 这些方法可以帮助您解决jQuery Mobile跳转后页面大小不适应手机屏幕的问题。如果还有其他问题，请随时提问！
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值