Suche…
Seitenlayout auf verschiedenen Geräten - CSS
Wenn Ihre Anwendung auf verschiedenen Geräten ausgeführt werden soll, muss sie je nach Gerätegröße in verschiedenen ViewPorts gerendert werden. Sie können auf zwei Arten damit umgehen: mit Javascript-Regeln oder CSS-Medienstilen. Wenn Sie eine MVC- oder MVVM-Bibliothek wie Angular oder Ember (oder Blaze für diese Angelegenheit) verwendet haben und nur ein einzelnes Gerät oder eine Hardwareplattform anvisiert haben, müssen Sie möglicherweise Ihr MVC-Modell überdenken, da andere Hardware-ViewPorts vorhanden sind in Ihre Bewerbung eingeführt.
// desktop
@media only screen and (min-width: 960px) {
}
// landscape orientation
@media only screen and (min-width: 768px) {
}
// portrait orientation
@media only screen and (min-width: 480px) {
}
Sie müssen herausfinden, ob Sie die Stile bei 768px (Hochformat) oder 1024 Pixel (Querformat) aufteilen möchten. Angenommen, Ihr mobiles Zielgerät ist das iPad, das ein Verhältnis von 3: 4 verwendet. Andernfalls müssen Sie die Seitenverhältnisse der Geräte ermitteln, auf die Sie abzielen möchten, und die Schwellenwerte von dort aus ermitteln.
Festgelegte Fenstergröße
Wenn Sie Layouts mit Bildschirmen mit fester Größe für verschiedene mobile Geräte entwerfen, möchten Sie möglicherweise dieses Design spiegeln, wenn Sie Ihre App auf einem Desktop ausführen. Mit der folgenden Methode wird die Größe des Fensters AUSSERHALB von PhoneGap festgelegt, wodurch ein Fenster mit fester Größe auf dem Desktop angezeigt wird. Manchmal ist es am einfachsten, die Erwartungen der Benutzer und das Design der Benutzeroberfläche durch Einschränken der Optionen zu verwalten!
// create a window of a specific size
var w=window.open('','', 'width=100,height=100');
w.resizeTo(500,500);
// prevent window resize
var size = [window.width,window.height]; //public variable
$(window).resize(function(){
window.resizeTo(size[0],size[1]);
});
Offline-Zwischenspeicherung
Damit all dies funktioniert, benötigen Sie wahrscheinlich eine Offline-Unterstützung, d.
meteor add appcache
meteor add grounddb
Scroll-Bounce deaktivieren
Bei Desktop-Apps möchten Sie möglicherweise den Scroll-Bounce-Modus deaktivieren, um Ihrer App ein natürlicheres Gefühl zu verleihen. Sie können dies mit Javascript tun, indem Sie deaktivieren, wie der Browser das DOM steuert:
// prevent scrolling on the whole page
// this is not meteorish; TODO: translate to meteor-centric code
document.ontouchmove = function(e) {e.preventDefault()};
// prevent scrolling on specific elements
// this is not meteorish; TODO: translate to meteor-centric code
scrollableDiv.ontouchmove = function(e) {e.stopPropagation()};
Alternativ können Sie css sowie die Überlauf- und Bildlaufstile verwenden.
#appBody {
overflow: hidden;
}
#contentContainer {
.content-scrollable {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
Das Objektmodell, das für das Funktionieren des Obigen benötigt wird, sieht in etwa so aus:
<div id="appBody">
<div id="contentContainer">
<div class="content-scrollable">
<!-- content -->
</div>
</div>
</div>
Multitouch & Gesten
Mobile Geräte verfügen im Allgemeinen über keine Tastaturen. Sie müssen also Ihrer Anwendung einige haptische Controller hinzufügen. Die zwei beliebtesten Pakete, die die Leute scheinbar verwenden, sind FastClick und Hammer. Die Installation ist einfach.
meteor add fastclick
meteor add hammer:hammer
FastClick erfordert fast keine Konfiguration, während Hammer zum Verdrahten ein bisschen Arbeit erfordert. Das konische Beispiel aus der Todos-App sieht folgendermaßen aus:
Template.appBody.onRendered(function() {
if (Meteor.isCordova) {
// set up a swipe left / right handler
this.hammer = new Hammer(this.find('#appBody'));
this.hammer.on('swipeleft swiperight', function(event) {
if (event.gesture.direction === 'right') {
Session.set(MENU_KEY, true);
} else if (event.gesture.direction === 'left') {
Session.set(MENU_KEY, false);
}
});
}
});
Erstellen Sie Ihre Symbole und Begrüßungsbildschirme
Bevor Sie Ihre App kompilieren und auf Ihrem Gerät ausführen, müssen Sie einige Symbole und mobile-config.js erstellen und Ihrer App eine mobile-config.js Datei hinzufügen.
App.icons({
// iOS
'iphone': 'resources/icons/icon-60x60.png',
'iphone_2x': 'resources/icons/[email protected]',
'ipad': 'resources/icons/icon-72x72.png',
'ipad_2x': 'resources/icons/[email protected]',
// Android
'android_ldpi': 'resources/icons/icon-36x36.png',
'android_mdpi': 'resources/icons/icon-48x48.png',
'android_hdpi': 'resources/icons/icon-72x72.png',
'android_xhdpi': 'resources/icons/icon-96x96.png'
});
App.launchScreens({
// iOS
'iphone': 'resources/splash/splash-320x480.png',
'iphone_2x': 'resources/splash/[email protected]',
'iphone5': 'resources/splash/[email protected]',
'ipad_portrait': 'resources/splash/splash-768x1024.png',
'ipad_portrait_2x': 'resources/splash/[email protected]',
'ipad_landscape': 'resources/splash/splash-1024x768.png',
'ipad_landscape_2x': 'resources/splash/[email protected]',
// Android
'android_ldpi_portrait': 'resources/splash/splash-200x320.png',
'android_ldpi_landscape': 'resources/splash/splash-320x200.png',
'android_mdpi_portrait': 'resources/splash/splash-320x480.png',
'android_mdpi_landscape': 'resources/splash/splash-480x320.png',
'android_hdpi_portrait': 'resources/splash/splash-480x800.png',
'android_hdpi_landscape': 'resources/splash/splash-800x480.png',
'android_xhdpi_portrait': 'resources/splash/splash-720x1280.png',
'android_xhdpi_landscape': 'resources/splash/splash-1280x720.png'
});
Meteor Cordova Architektur-Pipeline
Jetzt ist es an der Zeit, die Dokumentation zur Meteor Cordova Phonegap Integration durchzugehen .
Seit der Erstellung dieser Dokumentation wurden XCode und Yosemite veröffentlicht, was bei der Installation zu Problemen führte. Hier sind die Schritte, die wir durchführen mussten, um Meteor auf einem iOS-Gerät zu kompilieren.
- Upgrade auf Yosemite.
- XCode löschen (aus dem Anwendungsordner in den Papierkorb ziehen)
- Installieren Sie XCode 6.1 aus dem App Store.
- Stimmen Sie den verschiedenen Bedingungen zu.
# 5. clone and rebuild the ios-sim locally # (this step will not be needed in future releases) git clone https://github.com/phonegap/ios-sim.git cd ios-sim rake build # 6. make sure we can update the .meteor/packages locations # (this step will not be needed in future releases) sudo chmod -R 777 ~/.meteor/packages # 7. copy the new build into Meteor locations # (this step will not be needed in future releases) for i in `find ~/.meteor/packages/meteor-tool/ -name ios-sim -type f`; do cp -R ./build/Release/ios-sim "$i" done # 8. install the ios platform to your app cd myapp meteor list-platforms meteor add-platform ios meteor list-platforms # 9. and that there aren't dead processes ps -ax kill -9 <pid> # /Users/abigailwatson/.meteor/packages/meteor-tool/.1.0.35.wql4jh++os.osx.x86_64+web.browser+web.cordova/meteor-tool-os.osx.x86_64/dev_bundle/mongodb/bin/mongod # tail -f /Users/abigailwatson/Code/Medstar/dart/webapp/.meteor/local/cordova-build/platforms/ios/cordova/console.log # 10. make sure there are correct permissions on the application (important!) sudo chmod -R 777 .meteor/local/ # 11. run app meteor run ios # 12. if that doesn't work, clear the directory sudo rm -rf .meteor/local # 13a. run meteor again to create the default browser build meteor # 13b. run it a second time so bootstrap and other packages get downloaded into the browser build ctrl-x meteor # 14. then run the ios version ctrl-x meteor run ios
XCode sollte während des Prozesses gestartet werden. Wählen Sie Ihren Simulator aus und drücken Sie die 'Play'-Taste.
IOS-Entwicklung
- Registrieren Sie Ihren Apple Developer Account
- Registrieren Sie eine App-ID für Ihre App
- Registrieren Sie die UUID Ihrer Testgeräte
- Generieren eines Bereitstellungsprofils für die iOS-App-Entwicklung
- Generieren Sie ein CertificateSigningRequest von KeychainAccess
- Senden Sie CertificateSigningRequest an https://developer.apple.com/account/ios/profile/profileCreate.action
- Laden Sie das Zertifikat herunter, und doppelklicken Sie darauf, um es in den Schlüsselbund zu importieren
- Gehen Sie zu XCode> Einstellungen> Konten und registrieren Sie Ihr Apple Developer Account
IOS-Gerätetest
- Stellen Sie sicher, dass Ihre Entwicklungs-Workstation und Ihr iPhone mit demselben WLAN-Netzwerk verbunden sind. Tethering, Hotspots und andere Ad-hoc-Netzwerke funktionieren nicht.
- Führen Sie
sudo meteor run ios-device - Bereitstellen auf Ihrem Gerät!
Konfigurieren Sie Ihr Cordova-Projekt (config.xml)
Meteor liest während des mobile-config.js eine mobile-config.js Datei im Stammverzeichnis Ihres App-Verzeichnisses und verwendet die dort angegebenen Einstellungen, um config.xml zu generieren.
Project_folder
├── /.meteor
└── mobile-config.js
Die meisten Konfigurationen können mit mobile-config.js (App-Metadaten, Voreinstellungen, Symbolen und Startbildschirmen sowie Installationsparametern für Cordova-Plugins) erreicht werden.
App.info({
id: 'com.example.matt.uber',
name: 'über',
description: 'Get über power in one button click',
author: 'Matt Development Group',
email: '[email protected]',
website: 'http://example.com'
});
// Set up resources such as icons and launch screens.
App.icons({
'iphone': 'icons/icon-60.png',
'iphone_2x': 'icons/[email protected]',
// ... more screen sizes and platforms ...
});
App.launchScreens({
'iphone': 'splash/Default~iphone.png',
'iphone_2x': 'splash/Default@2x~iphone.png',
// ... more screen sizes and platforms ...
});
// Set PhoneGap/Cordova preferences
App.setPreference('BackgroundColor', '0xff0000ff');
App.setPreference('HideKeyboardFormAccessoryBar', true);
App.setPreference('Orientation', 'default');
App.setPreference('Orientation', 'all', 'ios');
// Pass preferences for a particular PhoneGap/Cordova plugin
App.configurePlugin('com.phonegap.plugins.facebookconnect', {
APP_ID: '1234567890',
API_KEY: 'supersecretapikey'
});
Bearbeiten Sie die Datei /.meteor/local/cordova-build/config.xml nicht manuell, da sie bei jedem meteor run ios/android oder meteor build wird. Dadurch gehen alle Ihre Änderungen verloren.
Referenzseite: Meteor Guide> Build> Mobile> App konfigurieren
Erkennen des Geräteereignisses
Natürlich ist die Erkennung von Mobilgeräten am besten, wenn Sie von der Hardware direkt benachrichtigt werden. Cordova PhoneGap stellt ein "deviceready" -Ereignis bereit, zu dem Sie einen Ereignis-Listener hinzufügen können.
document.addEventListener('deviceready', function(){
Session.set('deviceready', true);
}, false);