Hybrid Mobile App Development Images - javascript

Just want to ask, if how do you handle images for multiple dpi screen. Are you creating multiple image to support different screen resolution. By the way Im about to use Onsen UI Framework.
Thanks!

Related

How to render a mobile screen with mobile app running on desktop browser?

I want to create a web app such as this?
I already have a mobile app how do I display my mobile app like this on the large screens?
On large screens, I want a mobile and then mobile app running within it.
This is the link for the website shown in image
I want my Website to work like this, how can I achieve it?
I already have an mobile app made using ionic, what i want is to use that app for large screens like this website has used.
I'm not sure if I understand what you're asking.
To make responsive websites, you should use this:
#media (min-width: Xpx) {
}
You can define your minimum width here, that indicates the size of browser at which these settings should be applied. If you're using sass, nest this and apply your browser-sized settings there.
I hope that was helpful, but maybe I misunderstood the question and it's more complicated
I don't have any experience of this problem but there is a dedicated article here: https://ionicframework.com/blog/tips-tricks-for-ionic-on-desktop/
This can be created by using an Iframe on the Desktop.
So I created an SVG for the borders of the mobile and rendered my app inside the SVG using the Iframe.
Since I am using Iframe so my app takes mobile width as viewport width and is rendered as it should on mobile.

Ionic cropping an image without UI

Problem
I have been trying for awhile without success to crop an base64 image taken from the camera using the camera preview plugin to a 4:3 resolution without any cropping input being done by the user.
Most plugins I have tried so far force a UI but for my purpose it needs to crop to 4:3 to then be sent to a server all as the same resolution.
What i've tried
I have tried tweaking the ionic native plugin without success.
Also i've tried numerous different Cordova plugins that have been suggested from other forum posts such as:
Cropper.js
Croppr.js
Cordova Plugin Crop - without the ionic native side
iCrop
All of those as far as I know force a UI as well as don't allow you to specify an aspect ratio.
In our app we needed cropped pictures as well. However it turned out (especially on Android devices) that the way you can crop after taking a picture depends on brand, model and even the camera app.
In Ionic 3 the camera plugin has an option allowEdit. There are some side effects when you set this to true. For example some users cropped there pictures in a very weird aspect ration like: 1:15, so a very small width, and a very large height. Keep this in mind when you allow your users to edit their pictures.
To get consistent crops we have implemented the cropping server side. In order to speed things up we only resize the picture on the client and upload the resized picture to the server.

PhoneGap app fit all sizes

So, I have just started using PhoneGap and PhoneGap Build to make and build my apps but I have one problem, how do I make my app fit all screen sizes like tablets and phones, is there something I have to do in the XML file or is there something else that PhoneGap requires me to do?
PhoneGap is natively responsive, so you do not need to do anything to make it work on different sized screens. That being said, you should follow the guidelines of responsive web desing to make sure your content looks good on all devices.

CSS/HTML/JS: what to watch out for when building website that will have a mobile layout

I'm building a website that will need to have diff mobile layouts depending on the screen size of the device but I don't want to have to design entirely new layouts for each device. So I was wondering if there are things I need to watch out for that don't convert well into a mobile layout? Or how to set up the original to scale well to smaller devices. Thanks a lot
Read about media queries:
http://www.w3.org/TR/css3-mediaqueries/
Then read about responsive layouts done with purely CSS:
http://css-tricks.com/6731-css-media-queries/
This is basically all about styles and sometimes javascript (if you want to make responsive design)
Take a look on what CSS should be loaded for different devices and how to use
http://podlipensky.com/post/2011/08/25/What-CSS-file-to-load-for-mobile.aspx
http://www.alistapart.com/articles/return-of-the-mobile-stylesheet
And here you can read about responsive web design
http://www.alistapart.com/articles/responsive-web-design/
http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/

In what is the pip.io UI built?

Can anyone tell me if the http://pip.io UI is built in AJAX or only JavaScript?
The reason I ask this is that I noticed the UI is scalable in the browser. So with different screen resolutions it displays the same.
Do you mean scalable as in it works with multiple resolutions? The UI is designed with CSS which allows it to do so. The rest of the frontend is built with Mootools, which handles all the fancy animations and api calls.
We set the minimal height and width to accomodate for the design. It is a technical decision because at a smaller resolution, some areas won't be able to render properly. Also since most monitors are at least 1024px wide it shouldn't be an issue with most users.

Categories