0

こんにちはすべて私はすでに作成し、ファイルcssで使用しているWebサイトのモバイルサイトを作成しようとしています。

  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 を現在使用していますが、これは現在、ターゲット モバイル デバイスで良い結果を得るために良い習慣ではありません。

代わりに、以下のように HTML5 Doctype を試すことをお勧めします...

<!DOCTYPE html>

さらに、モバイル サポートのために、Viewport Meta を追加する必要があります

<meta name="viewport" content="initial-scale = 1.0, user-scalable = no">

次に、INPUT の CSS を定義します。

input { /* コードをここに入力 */ }

input#submit { /* ここにスタイルを入れます */ }

また、対象のモバイル デバイスと画面に CSS Media Query を使用することをお勧めします。

@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%;  
}

私はそれをテキストとは考えていなかったので、入力にフォントサイズを含めることは考えていませんでした。

于 2012-10-22T09:26:04.323 に答える