One of the issues with cross-platform development on mobile devices is how to handle the diversity of screen-sizes in a visually pleasing way.
Corona handles this elegantly with its dynamic sizing, but how to get rid of those pesky black borders? Nobody likes those right?
After reading Matthew Pringle’s post http://j.mp/rBeLFq I was inspired to write a small app that demos a way to handle this issue.
You can get the source here: http://j.mp/vcqMoZ
The way it works is by creating an oversized image with a bleed-zone that will cover all devices.
The base image including bleed-zones should be 610x420, and for high-res (retina) you would create an 1220x840 image. (See the sample images from the source above to get a better understanding)
[lua]-- config.lua
application =
{
content =
{
width = 320,
height = 480,
scale = “letterbox”,
imageSuffix =
{
["@2x"] = 1.6
}
},
}[/lua]
The config.lua will inform Corona about the base-size of your canvas, and how to handle the scaling between devices. You only specify the size of your base screen without the bleed-zones.
The main.lua is very simple:
[lua]-- main.lua
display.setStatusBar(display.HiddenStatusBar);
– get the usable coordinates for the device
local screen =
{
left = display.screenOriginX,
top = display.screenOriginY,
right = display.contentWidth - display.screenOriginX,
bottom = display.contentHeight - display.screenOriginY
};
– get the background image
– please note that the reference-point is in the center of the image,
– by putting the image in the center of the screen the bleed-zones will only be
– displayed on devices with different aspect ratios than the base device.
local bg = display.newImageRect(“blob.png”, 610, 420);
bg.x = display.contentWidth / 2;
bg.y = display.contentHeight / 2;
– show usable coordinates
display.newText("left: "…tostring(screen.left), 10, 10, native.systemFont, 14);
display.newText("top: "…tostring(screen.top), 10, 25, native.systemFont, 14);
display.newText("right: "…tostring(screen.right), 10, 40, native.systemFont, 14);
display.newText("bottom: "…tostring(screen.bottom), 10, 55, native.systemFont, 14);[/lua]
This code will display your background image on any device without any annoying black borders.
Try it in the simulator and change the device type to see the beauty of it all… oh yeah 
You can also use the screen table to make use of the bleed area and know where it’s safe to put your objects and still be visible on the screen.
[import]uid: 70847 topic_id: 17798 reply_id: 317798[/import]