0

最近、「アルファ」ステージのウェブサイトを公開しました - http://www.elegantdesigns.comule.com/

メディア クエリを使用して、モバイル サポートで完全にコーディングしました。ブラウザで表示して幅を小さくすると、問題なく動作します。ただし、幅 720 ピクセルのモバイル デバイス (Samsung Galaxy Note 2) で使用すると、すべての右側にスペースがあり、ページの背景だけが表示されます。

100% の幅を使用しました。また、複数の要素に対して、overflow-x を非表示に設定しました。

上記のリンクを使用して自分で調べてください。

これは、私のデバイスでサイトがどのように見えるかです。

http://i.stack.imgur.com/27wJc.png

誰にもアイデアはありますか？

Web サイトの主要なモバイル部分を制御するすべてのスタイルシートへのリンクを次に示します。- http://elegantdesigns.comule.com/mobilestyle.css - http://elegantdesigns.comule.com/tabstyle.css

ヘッダーを制御する html は次のとおりです。

<html>
<head>
    <title>Flat Designs</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" media="only screen and (min-width: 811px)"href="mainstyle.css">
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 810px) and (min-width: 721px)" href="tabstyle.css">
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 720px) and (min-width: 521px)" href="mobilestyle.css">
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 520px) and (min-width: 431px)" href="tinystyle.css">
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 430px) and (min-width: 1px)" href="smalleststyle.css">
    <link rel="shortcut icon" href="http://www.iconj.com/ico/9/e/9ecev208p2.ico" type="image/x-icon" />

    <link href='http://fonts.googleapis.com/css?family=Ropa+Sans:400italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>

</head>
4

1 に答える 1