I'm making a Cordova app and I've recently started experimenting with testing it in Chrome dev tools. I'm emulating touch events, and that's working fine. But when emulating the device screen resolution, things started to get weird. I'm working with an iPhone 5 screen right now, and the device size I use for that is 320x568. In Chrome dev tools, I set the device resolution to 320x568. When running the app in Chrome, everything is twice as small as it should be. So I ran width and height operations on the window, document, and screen objects.
$(window).width() returned 640
$(window).height() returned 1135
$(document).width() returned 1280
$(document).height() returned 1136
screen.width returned 320
screen.height returned 568
screen.width and screen.height are correct. The window width and height are ~double, and the document dimensions are just weird. I'm not sure what's wrong with them or what's causing this. It's my understanding that everything should be 320x568. What can I do to make sure of this?
Related
I'd like to upload my app to the appstore.
Just need some screen grabs 1242 x 2208.
In xcode 8/simulator i could set the size of the simulator to 50%, 100%, etc. and then take the screen shot.
But with xcode 9/sim the options are either 50% or actual size and while 100%, 200% are still there they are disabled. SO my screen grabs are like 500 x 700 or something similar.
And I have an old 5s so that won't help anyone.
Thanks.
I use my iPhoneSE and iPad Mini for my screenshot submissions. Never had any problem. Here's the steps:
Connect device to Mac.
Open QuickTime, choosing menu option File | New Movie Recording. (This sets up a “perfect” StatusBar.)
ALSO: If screenshot uses UIActivityController, turn Airdrop OFF.
Select device, take pics.
Import to Mac. (Airdrop, tethered connection to Photos or iPhoto, etc.)
Using Preview, resize iPad screenshots to 2732 x 2048, and iPhone screenshots to 2208 x 1242.
Note: My sizes are for portrait, but landscape works just the same.
http://www.myobgyn.ca/demo789/desktop/index4sdm.html
Looks good on desktop and designed to be pixil perfect and not extend on desktop. However, on iphone / ipad, I would like it to extend out to full width automatically. I don't want a mobile version, but simple for it to display full screen on iphone / ipad; but also have fixed pixil width desktop.
meta id='viewport' name="viewport" content="width=device-width"
I have tried multipe VIEWPORT tags, (scale etc, defined width) current am only using the below, and its not working in portrait. pixil width of app is 580
on iPhone 5S it scrolls in portrait, but fits screen in landscape..
Also, device has a roller at bottom that user moves. Unofrtunately, that movement at edge of screen triggers the ios swipe to open the next safari pages.. can I turn that feature off.
I'm working in Swift with XCode 6 and Sprite Kit and I want to have the biggest pixel in y, so i'm using this function :
CGRectGetMaxY(frame)
and I tested my code with the iPhone 6 simulator, so the value should be 1334.0 but the console shows me only 667.0 ...
What is wrong ?
It appears you're working in "point-space" and not "pixel-space". Depending on your settings, your image (I'm assuming that's where 1334 comes from) is likely at a #2x resolution.
Check your assets folder to make sure the image is defined how it should be.
Check your scale settings
UIKit (and most of iOS) runs on point-space, so try to work in these coordinates - they abstract device resolution (important now that we have #1x, #2x, and #3x devices).
Point-space:
The original iPhone was 320x480 pixels. In order to have your code be device-agnostic, when they went to Retina, the screen and all the logic stayed at a resolution of 320x480. These didn't always correspond to pixels, so the terminology changes to "points". That's why when you grab the screen size for an iPhone 4 it still reports 320x480.
Apple's Documentation on this.
I am creating the samsung smart Tv application for 1280 x 720. I am using 4.1 sdk. I designed my html also with the same resolution. But the problem is when i checked it in the emulator it is not showing the full content.
My Html view:
My emulator view
when i click the down button it is showing the below content but it is not displaying the contents from the margin even if i prss the left button.
can anyone help me.
Samsung TV browsers run at a resolution of 960x540 and then are scaled up to fit the physical resolution of the screen. You should design for that size.
Widgets on Samsung Smart TV 2011+ support 960x540, 1280x720, widgets on 2012+ supports additionaly 1920x1080. See samsungdforum.com guides.
Samsung Emulator correctly supports only 960x540.
You should test your markup on real device.
Check your widget.info files, Samsung TV Apps store what resolution used in this file.
The default is 960x540 so your UI is cutted.
For 1920x1080 resolution is not suggested since the Smart TV Series 4 (ES4XXX/F4XXX) only support resolution up to 768p and causing the apps with 1080p failing to start or just give black screen.
I came up with a design where I have a larger canvas nested inside my main one. The main one I will refer to as ctx. I move the larger one around and ctx masks it nicely. I did my dev in chrome and safari and it works nicely.
When I host it and check on my iPad3 I discover some limitations.
Apparently there is a maximum limit set to the height and width for an html5 canvas in iOS !
So I stripped down my code to a basic handful of lines to do testing. A 2000 x 2000 canvas will nest fine and display on an iPad3 but when I go up to 3000 x 3000 it shows blank.
I'm now left with a burning question - what are these maximums and do they differ for older iOS devices?
I did try searches but I can't find the answer so I turn to stackoverflow for help.
I've run into this before as well, I think the problem is the amount of available video memory. It's not a specific width/height that is a problem, it's the width multiplied by the height, and the actual number is probably hardware specific.
Hate to say it, but I think you're just going to have to try it out and see what you can/can't get away with. Design your app around that restriction.
Note that the iPad 3's retina display means this it actually has slightly worse video performance than older generations.