I am trying to get the screen height and width of the platform object, but evidently the screen orientation confuses these values.
Test code:
platform.ready().then(() => {
console.log("orientation", screenOrientation.type);
console.log("platform height", this.platform.height());
console.log("platform width", this.platform.width());
events.subscribe('orientation-changed', (screenOrientation) => {
console.log("orientation", screenOrientation.type);
console.log("platform height", this.platform.height());
console.log("platform width", this.platform.width());
});
});
I run the app starting in portrait mode, and I get:
orientation portrait-primary
platform height 567
platform width 360
I rotate the phone to landscape, and I get:
orientation landscape-primary
platform height 567
platform width 360
Until now, everything seems to be in order.
But now, if I turn the phone back to portrait mode, I get:
orientation portrait-primary
platform height 335
platform width 598
If I turn it again to landscape:
orientation landscape-primary
platform height 567
platform width 360
How can I get the correct height and width, without being concerned about the phone orientation?
Related
I implemented a signature pad using https://github.com/ramsatt/Angular9SignaturePad/tree/master/src/app/_componets/signature-pad and it works fine on smaller devices but on iPad or bigger devices like 7" upwards, it doesn't work properly.
When drawing on the screen, the resulting line has an offset from where the user touched (Signature drawn doesn't appear directly under the pen as user draws).
please how can I fix this.
So I fixed it by adding the below code and calling it in ngOnInit
resizeCanvas() {
var width = this.signaturePadElement.nativeElement.width;
var height = this.signaturePadElement.nativeElement.height;
var ratio = Math.max(window.devicePixelRatio || 1, 1);
if (ratio <= 2) {
this.signaturePadElement.nativeElement.width = width * ratio;
this.signaturePadElement.nativeElement.height = height * ratio;
this.signaturePadElement.nativeElement
.getContext("2d")
.scale(ratio, ratio);
}
then do
ngOnInit(){
this.resizeCanvas()
}
this.signaturePadElement is your Element gotten using ViewChild()
My ionic appp is to take pictures of business cards. as 99% of the business cards are landscape style so users tries to change the camera orientation to landscape mode as well. This is a natural behavior.
However, i want to avoid that and one way is to show a rectangle while camera is open (width equal to screen width and a 3:2 aspect ratio for height)
This will make life easy as users wont try to change the camera orientation.
I was looking into camera plugin which uses code like
this.camera.getPicture({
destinationType: this.camera.DestinationType.DATA_URL,
quality: 25,
correctOrientation: true,
allowEdit:false,
sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM
}).then(async(imageData) => {
//console.log("image data is:" + imageData)
// imageData is a base64 encoded string
var base64Image = "data:image/jpeg;base64," + imageData;
I was trying targetWidth and height but that does not draw that box like i have seen in many other apps.
there are other plugins like cropperJs but seems they let u crop the image after taken which not what i need.
Use camera-preview-plugin instead of camera for that :
const cameraPreviewOpts: CameraPreviewOptions = {
x: 0,
y: 0,
width: window.screen.width,
height: window.screen.height,
camera: 'rear',
tapPhoto: true,
previewDrag: true,
toBack: true,
alpha: 1
}
Ionic Camera Preview
While in editor, everything's working fine, but when I build the game to my phone, the background seems to be short on top and bottom side.
This is a screenshot from the phone build.
This is a screenshot from Unity.
I checked all sizes and they were all the same - 800x1280. I think the problem started to happen when I made the cloudy background infinitely move with a quad.
Checked everywhere, can't seem to pin-point the problem.
You should resize the background according to screen size. You can do that through code. If you are using Sprite Renderer, you can follow this link to do so. Here's the main codes needed to resize a sprite according to the above link.
void Awake() {
SpriteRenderer spriteRenderer = GetComponent<SpriteRenderer>();
float cameraHeight = Camera.main.orthographicSize * 2;
Vector2 cameraSize = new Vector2(Camera.main.aspect * cameraHeight, cameraHeight);
Vector2 spriteSize = spriteRenderer.sprite.bounds.size;
Vector2 scale = transform.localScale;
if (cameraSize.x >= cameraSize.y) { // Landscape (or equal)
scale *= cameraSize.x / spriteSize.x;
} else { // Portrait
scale *= cameraSize.y / spriteSize.y;
}
}
Or if you are using a UI Panel under Canvas to draw the background, you can set the anchors on the edge points and set the Canvas's UI Scale Mode to Scale With Screen Size
Hi I'm new to blackberry. I want to show the image within the circle using qul.
The easiest way to vignette an image is to overlay it with another image. In Cascades if you create a Container using either DockLayout or AbsoluteLayout you can position multiple ImageView objects on top of one another. The first object will be on the bottom, last on the top, by default. You simply create an image with a transparent viewport of the shape you want. You can scale the image at runtime but you should make it about the size of the largest frame you will need to preserve quality. I used Gimp to create a 786 x 78x pixel image with a white frame and a transparent circle in the middle and saved it to the assets directory as frame.png. I grabbed another image I had easily to hand and create a BlackBerry project with this QML code in an appropriate place:
Page {
Container {
layout: DockLayout {
}
ImageView {
imageSource: "asset:///FusionMap.PNG"
preferredHeight: 360
preferredWidth: 360
}
ImageView {
imageSource: "asset:///frame.png"
preferredHeight: 360
preferredWidth: 360
}
}
}
This is the result:
In an HTML project, I'm using css to adjust the content layout for specific screen sizes, e.g.
the iPad landscape;
/*
##########################################################################
##########################################################################
iPad Layout Landscape: 1024px.
Content-Element width: 896px.
Gutters: 24px.
Outer content margins: 64px.
Inherits styles from: Default Layout.
##########################################################################
cols 1 2 3 4 5 6 7 8 9 10
px 68 160 252 344 436 528 620 712 804 896
##########################################################################
##########################################################################
*/
#media only screen and (max-device-width: 1024px) and (orientation:landscape) {
}
and that one works but for iPhone 5 portrait, I'm using;
/*
iPhone 5 portrait view
*/
#media screen and (max-device-width: 640px) and (max-device-height: 1136px) and (orientation:portrait) {
}
which doesn't work, that is it's shown as the iPhone 4 version (
/*
#########################################################################
##########################################################################
Overrides styles for devices with a
device-pixel-ratio of 2+, such as iPhone 4.
#########################################################################
##########################################################################
*/
#media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
}
).
The point is, these work for the devices described but on the iPhone 5, it is shown with the iPhone 4 settings, it needs to be made for the Retina 4-inch properties
Any ideas why and how to make it work?
Try this media query?
iPhone 5 media query
#media screen and (device-aspect-ratio: 40/71) {
/* styles for iPhone 5 goes here */
}
*SO Link iPhone 5 CSS media query
If you want to target more than just iOS devices, it's best to avoid the device media queries. On iOS those queries always reflect the portrait width and height, regardless of orientation. On Android and other operating systems, the device width and height will change based on orientation.
So if you want to use a media query that consistently matches the width and height of the current orientation across all devices, you should use max-width/max-height rather than max-device-width/max-device-height. This max sense for desktop browsers too, since you're more interested in the size of the browser window than you are the size of the user's monitor.
Another thing you should always do when working with media queries on mobile devices is to set the viewport metatag with width=device-width. If you don't do this, the media queries will often reflect a virtual viewport which isn't at all what you would expect.
For more information, I'd recommend reading this article from quirksmode.org.
Try to use this:
if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone){
CGSize result = [[UIScreen mainScreen] bounds].size;
CGFloat scale = [UIScreen mainScreen].scale;
result = CGSizeMake(result.width *scale, result.height *scale);
//here you can use height or width if depend for landscape or portrait
if(result.height == 960){
//here wat you need to load
}
}
Hope this help you or illuminate to other ways ;)
Why not break this down into a few different queries?
#media only screen and (max-width : 1024px) {
}
#media only screen and (max-width : 640px) {
}
#media only screen and (max-height : 1136px) {
}
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
}
#media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
/* 1.25 dpr */
}
#media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi){
/* 1.3 dpr */
}
#media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
/* 1.5 dpr */
}