手机webapp的jquery mobile初次使用心得和解决图片自适应大小问题

在开发移动webapp过程中，我使用的是jquery mobile这个框架，框架的特点就是非常好使用，对于页面要求不高，如实现简洁大方的网站可以理解为不用考虑js怎么用，甚至不会js也可以的。

 

目前没有看jquery mobile的源码，但是个人理解为，为添加的自定义标签标明属性，例如 data-theme="c" 就是定义为c类型的风格，我们只需要data-theme="c"一行简单的代码即可。

但是通过firebug查看时，是会包含很多内容的，css也都会关联上，这个就是js通过识别添加的自定义属性来自动添加的css和标签中的其他属性。

 

由于js在手机上面支持很不好，所以我在初次接触webapp时，是直接看的api了解各种自定义属性（api接口）的用法。

 

个人觉得在初期，可以先把jquery mobile的api当做新加的标签使用。

 

这个是一个中文的api文档 http://www.jqmapi.com

 

如果需要修改一些样式，可以在引入基础css和js组建后，添加一个css样式表，然后在里面修改css样式，用于覆盖前面的样式。

例如：禁止截断过长的列表和按钮内容

针对按钮的CSS样式设置：

.ui-btn-text {  
white-space: normal;  
} 
下面的是针对列表的CSS样式设置：

 .ui-li-desc {  
white-space: normal;  
}  

 

 

另外对于图片大小问题，因为我们现在的项目是做一个新闻类webapp，自动获取数据库中已有新闻的文章内容，这时图片是很适合pc使用的，当我们用手机浏览器打开是：百度浏览器和微信都是显示图片部分内容（图片大小超过屏幕大小），uc浏览器是能够自动调节图片适应屏幕大小的。

解决的方法其实非常简单：找到引入文章的那个标签的id

设置

#id img{width:100%;}

这样就能解决图片宽度的问题，其实是css的基础支持。