0

大家好，我正在尝试为我已经创建并在文件 css 中使用的网站创建一个移动网站。

  1. 我正在尝试将输入框设置为屏幕高度的 10%。我怎样才能做到这一点？
  2. 如何使登录按钮更高？

这是视图文件中的代码

<?php echo $this->Html->docType('xhtml-trans'); ?>
<html>


<head>
<style>
body {
background-color:#ADD8E6;
height: 960px;
width:  640px;
}

table, td, th
{   
    background-color: #ADD8E6;
}
input
{
    height:233%;
    width:70%;  
}
</style>
    <title> <?php echo $title_for_layout; ?></title>
    <?php echo $this->Html->css($stylesheet_used); ?>
</head>
<body>
<div id = "headertwo" style="background-image:url(<?php echo $this->webroot; ?>img/BannerGradient2.jpg);">
<center>    
<?php echo $this->Html->image($image_used, array(
    "alt" => "eBox",
    'url' => array('controller' => 'Users', 'action' => 'login'))) ?>
</center>
    </div>  
 <?php echo $this->Form->create('User', array('url' => array('controller' => 'users', 'action' => 'login')));?>
<table border=0 style="width:640px;">
    <tr>
    <td >Username:
    <?php echo $this->Form->input('username',array('label'=>false,));?></td>
    </tr>       
    <tr>    
        <td>Password: <?php echo $this->Form->input('password',array('label'=>false,));?></td>
    </tr>

    </table>
<?php echo $this->Form->end('Login', array('width'=>100));?>
    </div>
    </body>
    </html>
4

2 回答 2

3

用户1393064，

您现在正在使用 XHTML Doctype，这对于在 Targeted Mobile Device 中取得良好结果来说并不是一个好习惯。

相反，我建议您尝试 HTML5 Doctype，如下所示...

<!DOCTYPE html>

此外，对于移动支持，您需要添加 Viewport Meta

<元名称=“视口”内容=“初始缩放= 1.0，用户可缩放=无”>

然后你为 INPUT 定义你的 CSS

input { /* 把你的代码放在这里 */ }

input#submit { /* 把你的风格放在这里 */ }

我还建议您对目标移动设备和屏幕使用 CSS 媒体查询。

@media 屏幕和（最大宽度：640px）{

   body{ /* 把你的风格放在这里 */ }

   form{ /* 把你的风格放在这里 */ }

   input{ /* 把你的风格放在这里 */ }

   input#submit{ /* 把你的风格放在这里 */ }

}

如需进一步帮助，您可以参考这篇文章http://www.yourinspirationweb.com/en/tips-tricks-how-to-optimize-a-website-for-mobile-devices/

于 2012-10-22T09:57:49.920 回答
0

1.

input
{
    font-size:200%;
    width:70%;  
}

没有考虑在输入中包含字体大小，因为我不认为它是文本，duhhh

于 2012-10-22T09:26:04.323 回答