2

this may seem silly but I am unsure of the basic building blocks for developing a mobile site other than changing the CSS. All the articles I find point to developing a new CSS stylesheet using media queries to make it responsive. Being a web developer I cant help but think Im making something easy very difficult for myself. Can I just clear up something?

すでに存在するデスクトップサイトのモバイルバージョンを構築する場合、新しいhtml / phpファイルを作成し、それを元のファイルの代わりにコアインデックスファイルとして使用しますか。理由は、リンクのレイアウト/順序です。ボタンは完全に異なる可能性があるため、デスクトップとモバイルの両方で同じコードをどのように使用できるかわかりません。ブラウザなどに基づいて、完全に異なるファイルまたは異なるレイアウトを使用するのが標準的な方法ですか？（に似て<!--[if IE 7]>いますが、そうでない場合は、順序と内容をどのように変更しますか？

また、html / phpの変更を使用している場合、通常のファイル/コードの代わりにモバイルにそれを読み取らせるにはどうすればよいですか？

その質問が曖昧すぎる場合は、誰かが私にこの側面に答える堅実な記事を指摘してもらえますか。

4

3 に答える 3

4

これは大きなテーマであり、答えは常に同じではありません。場合によっては、サイトのモバイル バージョンを別の URL とすべてで提供するのが最適な場合もあれば、1 つのページを作成し、CSS と Javascript を使用してレスポンシブにする方がよい場合もあります。

レイアウトを根本的に変更して、HTML を別の方法で記述することを計画している場合は、別のページにすることをお勧めします。CSS は少し移動するのに適していますが、CSS を使用してサイトをまったく別のサイトに変えている場合は、別のページを検討する必要があります。

ほとんどの場合、それはあなた自身の裁量の問題です。ユーザーは、それが機能する限り、どのアプローチを使用してもあまり気にしません。開発者としての仕事を楽にすることは何でもしてください。

この回答が漠然としすぎていないことを願っています。レスポンシブ サイトと個別のモバイル サイトについては、Google で詳細を確認できます。 これは、トピックに関する良いケーススタディです。

于 2013-01-16T22:47:25.733 に答える
3

TwitterBootstrapについて読んでください。これはCSS/JavaScriptプラグインであり、Webサイトに適用すると、iPad、iPhone、Android、Windowsなどで機能するようにサイズ変更と再編成が行われます。これは、基本的なWebサイトをモバイルに変換するための最も簡単で効果的な方法です。アプリ。

これがあなたの目的であるかどうかはわかりませんが、しばらく前にアプリからブートストラップに切り替えましたが、うまく機能しています。

于 2013-01-16T22:49:36.433 に答える
2

まず、jQuery Mobile を使用して Web サイトを構築していると言いたいと思います。

jQuery Mobile の「ページ」構造は、単一ページ、またはページ内のローカル内部リンク「ページ」のいずれかをサポートするように最適化されています。

このモデルの目標は、開発者がベスト プラクティスを使用して Web サイトを作成できるようにすることです。標準の HTTP 要求では実現できないリッチでネイティブのようなエクスペリエンスを作成しながら、特別な構成を行わなくても通常のリンクが「機能する」ようにします。

モバイルページの構造

フレームワークのすべての機能を最大限に活用するには、jQuery Mobile サイトを HTML5 'doctype' で開始する必要があります。(HTML5 を理解しないブラウザーを搭載した古いデバイスは、'doctype' およびさまざまなカスタム属性を安全に無視します。) 'head' では、jQuery、jQuery Mobile、およびモバイル テーマ CSS への参照はすべて、開始するために必要です。

これは jQuery ページの例です。

このように、jQuery Mobile フレームワークでページを簡単に作成できます。www.jquerymobile.comのサイト全体には、モバイル デバイスに必要なすべてのタスク バー、ポップアップ ウィンドウ、メニュー項目などの完全な包括的なリストがあります。また、ページのスライドとクールな iPhone の「スワイプ」アクションも可能です。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Page content goes here.</p>      
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

汎用性と使いやすさが非常に優れているかのように、これを誰にでも強くお勧めします。

よろしく、

-エピック-

于 2013-01-17T00:24:24.973 に答える