what is the best screen size for tablet ?

Other
#1

hi guys !

I’m trying to create an application using webView with one .html5 file and two .css files. The Simulator does not support .css files. However when the dimension is small when I build it with 3100 X 2500 pixels it works on the tablet normally. But the letters are very small on the screen.
I quickly understood that with a good dimension it will work.

#2

What are you asking for specifically? The optimal values for width and height in config.lua?

If so, then I’ve personally been using 960x640 for years. I design my apps so that everything can fit inside that area, but so that the UI adapts to taller and wider screens.

#3

should I detect the screen size and create a scene for each screen type?

#4

I don’t. I just have a universal design approach where all critical UI elements can fit inside the content area I’ve defined, so that it works on small screens. Then, for devices that have taller or wider screens, my UI just extends further, and certain buttons and other UI elements are dynamically positioned to the edges of the screen.

#5

if I understand correctly there is not a single formula for any type of screen.
I have to consider my application for a particular screen

#6

You can take a look at my screen module. It handles different sized screens.

1 Like
#7

I I don’t understand anything at all.
I would like to copy the screen.lua file to integrate it into my program but I don’t know how to make it work. could you give me more explanation?

#8

Do I need to insert screen.lua codes on each scene that needs size adjustement ?

Do I have to embed the codes from screen.lua in every scene that needs position adjustment ?

#9

I work on WebView, my problem is that I cannot visualize my work because the simulator does not support css files with html5. I have to build at each change to preview. it makes it difficult for me. That’s why i need to be more specific

#10

All that my module does is it figures out the coordinates for the edges of the screen, as well as the screen’s actual width and height in Solar2D units. You don’t need to do anything for it to work. You just need to require it in the scenes where you need it so that you have access to its properties.

I also saw that you mentioned that the WebView on the simulator doesn’t support css, but that’s not the case. You can create a new project and add the following code to your main.lua and create the html and css files and it should work:

main.lua:

local webView = native.newWebView( display.contentCenterX, display.contentCenterY, 200, 200 )
webView:request( "page.html", system.ResourceDirectory )

page.html:

<!DOCTYPE html>
<html>

<head>
	<link rel="stylesheet" href="mystyle.css">
</head>

<body>
	<h1>Heading 1</h1>
	<p>Paragraph.</p>
</body>

</html>

mystyle.css:

body {
	background-color: lightblue;
}

h1 {
	color: navy;
	margin-left: 20px;
}

And when you run the project, you should see a light blue background with a blue and slightly offset heading.

#11

Just want to add, unless code deals with changes in config.lua, or build.settings file, you can use Live Builds to see changes right away in the device without the need of rebuilding the app.

1 Like
#12

I copied all the screen.lua file in my myWebview file it worked but the problem is that after each screen saver it reorganizes the screen in a different way and that is not good.

Now I would like to know how to call it directly in myWebView without copying the codes. I don’t know what to do!
should i do local screen=require "screen.lua" and then…

below are my codes

local composer = require( "composer" )
local scene = composer.newScene()


--------------------------------------------------------

local myWebView

-- create()
function scene:create( event )
local sceneGroup = self.view


local background = display.newImageRect( sceneGroup, "anleekran.png", 1800, 1560 )
background.x = display.contentCenterX
background.y = display.contentCenterY


myWebView = native.newWebView( display.contentCenterX+5, display.contentCenterY+25, 1145, 600 )
myWebView:setNativeProperty("setAllowFileAccess", true)
myWebView:request( "classe2/ns2.html", system.DocumentsDirectory )


end
---------------------------------------------
#13

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.