web-dev-qa-db-ja.com

media = 640pxはモバイル版のrel = "alternate"で修正されています

これで デスクトップおよびモバイルURLの注釈

media = "only screenおよび（max-width：640px）

モバイルデバイスの幅に関係なく固定されます。

言い換えれば、640pxはすべての人がそのようなすべてのページで使用すべき修正済みですか？

編集：上記のようにmedia = ...（max-width：640px）を使用するサイトで、Googleでフレーズを検索してみましたOperaモバイルシミュレーターの「キーワードwww.mysite.com」Sony Experia SL（HD Portrait 720x1280）およびデスクトップページバージョンには、次の行が含まれています。

<link rel = "alternate" media = "only screen and（max-width：640px）" `href =" http://m.example.com/page-1 ">

モバイルデバイスの幅は640pxを超えていますが、GoogleはサイトのモバイルページをSERPにリストしています。

Opera mobile simulator settings

mobilerel-alternate
2
user5858

rel="alternate"とmax-width:640pxの組み合わせは、ページがモバイル向けに設計されており、最大幅が640ピクセルであることをGoogleに通知するため、Googleはユーザーの画面解像度に基づいて他のサイトを優先する場合があります。理想的には、m.example.comを可能な限り使用せず、レスポンシブデザインを使用することをお勧めします。以下は、レスポンシブデザインと予想されるデバイスに関する情報です。携帯電話は、タブレットやウルトラブックラップトップと同じ解像度に近づいています。

コードmedia="only screen and (max-width: 640px)"は、1pxから640pxまでのデバイスにcss命令を設定することです。最近では640pxが非常に一般的ですが、1080pxがまもなく最も一般的になります。今後数年間で、スマートフォンはタブレットに近い解像度を使用し始めます。以下は、最も人気のあるいくつかの携帯電話とそれらが使用する解像度の概要です。携帯電話が横向きの場合は幅が大きくなる可能性があることを忘れないでください。

  • Apple iPhone 3GSは幅320ピクセルを使用します
  • Apple iPhone 4は幅640pxを使用します
  • Apple iPhone 5は幅640pxを使用します
  • Apple iPhone 6は幅1080pxを使用します
  • Samsung Galaxy S3は幅720pxを使用します
  • Samsung Galaxy S4は幅1080pxを使用します
  • Samsung Galaxy S5は幅1080pxを使用します
  • Samsung Galaxy S6は幅1440px以上を使用します

通常、次のようなものを使用します。

/* max-width 640px old mobile phones */
@media only screen and (max-width: 40em) { } 

/* min-width 641px and max-width 1024px, newer phones and tablets */
@media only screen and (min-width: 40.063em) and (max-width: 64em) { } 

/* min-width 1025px and max-width 1440px Tablets, Desktops, Laptops and newer Phones */
@media only screen and (min-width: 64.063em) and (max-width: 90em) { } 

/* Large Desktop, Laptops, Tablets and TV's max width 1441px, */
@media only screen and (min-width: 90.063em) { }

そのため、すべての解像度ではなくてもほとんどの解像度でWebサイトを使用できるようにするには、デザインでmax-widthsとfloatを使用する必要があります。たとえば、モバイルバージョンではページにサイドバーがない可能性が高いため、次のように要素でmax-width：100％を使用します。

HTML

<div>
    <div>Left Box</div>
    <div>Right Box</div>
</div>

CSS

div {width:100%;}
div div{height:200px;float:left;color:#fff;}
div div:nth-child(1){background:red;} 
div div:nth-child(2){background:black;} 

@media only screen and (max-width: 40em) { 
div div{width:100%;}
}

@media only screen and (min-width: 40.063em) {
div div{width:50%;}
}

この例は、私の JSFiddle で実際に動作しており、ブラウザウィンドウのサイズを変更して視点のサイズを変更できます。

1
Simon Hayter