Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Como dar suporte a tela cheia no seu widget

From Wiki
Jump to: navigation, search
Article Metadata

Compatibilidade
Plataforma(s):
Symbian

Artigo
Tradução:
Por thiagobrunoms
Última alteração feita por hamishwillee em 07 May 2013

Introdução

Inicialmente, o elemento body tem alguns valores pre-definidos para os atributos margin e padding. Para permitir que seu Widget oculpe toda a tela você precisará resetar estes valores colocando margin:0 e padding:0 no arquivo CSS. Se você não sobreescrever os valores defult e adicionar width:100%, você observará um movimento horizontal.

body{
width:100%;
height: 100%;
background-color:#f3f3d1;
 
/*Setar estes dados para omitir os pequenos movimentos horizontais*/
margin: 0;
padding: 0;
}

O próximo passo é fazer uma div na forma de wrapper que contém todo o seu conteúdo. Você terá que usar posição absoluta e colocar a div para iniciar a partir do canto superior esquerdo, definindo left: 0; </ tt> e <tt> top: 0; </ tt> no css:

/*posição absoluta é necessária para possibilitar cobrir toda a tela cheia*/
#fsWrapper{
width: 100%;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
}

Exemplo do Widget

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FS sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css">
<style>
body{
width:100%;
height: 100%;
background-color:#f3f3d1;
 
/*Setar estes dados para omitir os pequenos movimentos horizontais*/
margin: 0;
padding: 0;
}
 
/*posição absoluta é necessária para possibilitar cobrir toda a tela cheia*/
#fsWrapper{
width: 100%;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="fsWrapper">
<!-- conteúdo do widget -->
</div>
</body>
</html>
This page was last modified on 7 May 2013, at 23:56.
182 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×