我正在使用ExtJs（sencha touch），它看起来不错。
Ext.setup({
tabletStartupScreen: 'images/tablet_startup_768x1004.png',
phoneStartupScreen: 'images/phone_startup_320x460.png',
tabletIcon: 'images/tablet_icon_72x72.png',
phoneIcon: 'images/phone_icon_72x72.png',
icon: 'images/icon_72x72.png',
statusBarStyle: 'black',
glossOnIcon: true,
fullscreen: true,
onReady: function() {
var viewport = null;
var metas = document.getElementsByTagName('meta');
for(var i = 0, length = metas.length; i < length; ++i){
var meta = metas[i];
if(meta.name == 'viewport'){
viewport = Ext.get(meta);
break;
}
}
if(null == viewport){
viewport = Ext.get(document.createElement('meta'));
}
if(window.navigator.standalone){
viewport.set({
name: 'viewport',
content: 'width=device-width, initial-scale=0.1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'
});
} else {
viewport.set({
name: 'viewport',
content: 'height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'
});
}
}
});
其他与...兼容的设备
var watcher = {
handlers: [],
dimentions: {width:0, height: 0},
fullscreenize: false,
orientLandscape: function (){
return 90 === Math.abs(window.orientation);
},
orientPortrait: function (){
return !this.orientLandscape();
},
width: function (){
return this.dimentions.width;
},
height: function (){
return this.dimentions.height;
},
changeDimentions: function (evt){
var self = this;
(function (){
if(self.fullscreenize){
window.scrollTo(0, 1);
}
self.dimentions = Ext.Element.getViewSize();
self.fireOnchange();
}).defer(100);
},
init: function (){
if('onorientationchange' in window){
Event.observe(window, 'orientationchange', this.changeDimentions.bind(this));
} else {
Event.observe(window, 'resize', this.changeDimentions.bind(this));
}
Event.observe(window, 'load', this.changeDimentions.bind(this));
},
fullScreen: function (){
this.fullscreenize = true;
var self = this;
document.observe('dom:loaded', function (){
(function (){
window.scrollTo(0, 1);
self.changeDimentions();
}).defer(100);
});
},
fireOnchange: function(){
var self = this;
self.handlers.each(function (handler){
handler.apply(null, [self]);
});
},
onchange: function (handler){
this.handlers.push(handler);
}
};
watcher.init();
watcher.fullScreen();
aComponent = Ext.extend(Ext.Component, {
initComponent: function (){
watcher.onchange(this.fullscreen.bind(this));
},
fullscreen: function (){
var height = watcher.height();
var width = watcher.width();
this.menu.setHeight(40);
this.mainPanel.onResize(height - 40, width);
}
});
