[
[返信する]]
スマホから閲覧時、画面が横長になる【解決済】
by 空
2017-12-14 23:51
新規トピ作成前に類似と思われる質問を探しましたが見付からなかったため、質問させていただきます。既に既出でしたら申し訳ございません。
当方、使い分けのために二つのサイトを同じテンプレでカラーコードだけ変えて使用しています。先日、スマホから閲覧した際に片方は縦長のスマホの画面に合わせた表示、もう片方が横長のPCに合わせた様な表示になっておりました。以前はスマホの画面に合わせた表示になったおりましたので直したく思います。
HEAD・HTML詳細を記載します。
※横長で表示されてしまうサイト
<!--検索避けタグ-->
<META NAME="ROBOTS" CONTENT="NOINDEX">
<META NAME="ROBOTS" CONTENT="NOFOLLOW">
<META NAME="ROBOTS" CONTENT="NOARCHIVE">
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE">
<META NAME="ROBOTS" CONTENT="NONE">
<meta name="robots" content="noindex">
<meta name="robots" content="nofollow">
<meta name="robots" content="noarchive">
<meta name="robots" content="noindex,nofollow,noarchive">
<meta name="robots" content="none">
<META NAME="GOOGLEBOT" CONTENT="NOINDEX">
<META NAME="GOOGLEBOT" CONTENT="NOFOLLOW">
<META NAME="GOOGLEBOT" CONTENT="NOARCHIVE">
<META NAME="GOOGLEBOT" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE">
<MATA NAME="GOOGLEBOT" CONTENT="NONE">
<meta name="googlebot" content="noindex">
<meta name="googlebot" content="nofollow">
<meta name="googlebot" content="noarchive">
<meta name="googlebot" content="noindex,nofollow,noarchive">
<meta name="googlebot" content="none">
<META NAME="LIBWWW-PERL" CONTENT="NOINDEX">
<META NAME="LIBWWW-PERL" CONTENT="NOFOLLOW">
<META NAME="LIBWWW-PERL" CONTENT="NOARCHIVE">
<META NAME="LIBWWW-PERL" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE">
<META NAME="LIBWWW-PERL" CONTENT="NONE">
<meta name="libwww-perl" content="noindex">
<meta name="libwww-perl" content="nofollow">
<meta name="libwww-perl" content="noarchive">
<meta name="libwww-perl" content="noindex,nofollow,noarchive">
<meta name="libwww-perl" content="none">
<!--検索避けタグ-->
<pc_only><style type="text/css"><!--
body{
text-align:center;
scrollbar-face-color:#ffffff;
scrollbar-3dlight-color:#c82c55;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ffffff;
scrollbar-darkshadow-color:#c82c55;
scrollbar-arrow-color:#c82c55;
scrollbar-track-color:#ffffff;
font-family:'メイリオ',Verdana, Arial, Osaka, Helvetica, sans-serif;}
br {letter-spacing:0;}
.layout{
width:550px;
text-align:left;
padding:25px;
margin:0 auto;
line-height:2.0;
letter-spacing:2px;
font-family:'メイリオ',Verdana, Arial, Osaka, Helvetica, sans-serif;
font-size:84%;}
.top{
font-family:Times New Roman, Arial;
font-size:190%;
letter-spacing:2px;}
.midashi{
text-align:left;
padding:1% 0% 1% 4%;
border-left:solid #c82c55 10px;
border-bottom:dashed #c82c55 1px;}
.midashi02{
padding:1% 0%;
font-weight:bold;
font-size:100%;
letter-spacing:2px;}
.line{
padding:1% 0% 2% 3%;
letter-spacing:2px;
font-family:Arial, Osaka, Helvetica, sans-serif;
border-bottom:solid #c82c55 1px;
border-left:solid #c82c55 1px;}
.footer{
text-align:right;
padding:1% 0% 0% 0%;
letter-spacing:2px; border-top:dashed #c82c55 1px;}
a{
text-decoration:none;
border-bottom:dashed #c82c55 1px;}
a:link{
text-decoration:none;}
a:visited{
text-decoration:none;}
a:hover{
text-decoration:none;
color:#c82c55;
position:relative;top:1pt;left:1pt;}
input,textarea,select,option{
padding:1px 3px;
margin:1px 1px;
font-family:メイリオ;
font-size:92%;
color:#c82c55;
background-color:#ffffff;
border:solid 1px #cccccc;}
--></style></pc_only>
<smartphone><style type="text/css"><!--
body{
text-align:left;
margin:3% 4%;
line-height:1.7;
letter-spacing:1px;
font-size:82%;}
.top{
font-family:Times New Roman, Arial;
font-size:150%;
letter-spacing:2px;}
.midashi{
text-align:left;
padding:2% 0% 2% 4%;
border-left:solid #c82c55 8px;
border-bottom:dashed #c82c55 1px;}
.midashi02{
padding:1% 0%;
font-weight:bold;
font-family:Arial;
letter-spacing:1px;}
.line{
padding:1% 0% 2% 3%;
letter-spacing:2px;
font-family:Arial, Osaka, Helvetica, sans-serif;
border-bottom:solid #c82c55 1px;
border-left:solid #c82c55 1px;}
.footer{
text-align:right;
padding:1% 0% 0% 0%;
letter-spacing:2px;
border-top:dashed #c82c55 1px;}
a{
text-decoration:none;
border-bottom:dashed #c82c55 1px;}
a:link{
text-decoration:none;}
a:visited{
text-decoration:none;}
a:hover{
text-decoration:none;
color:#c82c55;}
input,input[type="text"],input[type="number"],input[type="password"],input[type="submit"]{
width:auto;
padding-right:8px;
padding-left:8px;
margin:1px;
color:#c82c55;
background-color:#ffffff;
border:solid 1px #cccccc;}
textarea,select,option{
color:#c82c55;
background-color:#ffffff; border:solid 1px #cccccc;}
input:focus{
color:#c82c55;
background-color:#ffffff;
border:solid 1px #cccccc;}
textarea:focus{
color:#c82c55;
background-color:#ffffff;
border:solid 1px #cccccc;}
--></style></smartphone>
<nopc><style type="text/css">
body{
text-align:left;
padding:4% 5%;
line-height:110%;
letter-spacing:1px;
font-size:82%;}
.top{
font-size:120%;
letter-spacing:1px;}
.midashi{
text-align:left;
padding:2% 0% 2% 4%;
border-left:solid #c82c55 8px;
border-bottom:dashed #c82c55 1px;}
.midashi02{
padding:1% 0%;
font-weight:bold;
letter-spacing:1px;}
.line{
padding:1% 0% 2% 3%;
letter-spacing:1px;
border-bottom:solid #c82c55 1px;
border-left:solid #c82c55 1px;}
.footer{
text-align:right;
padding:1% 0% 0% 0%;
letter-spacing:2px;
border-top:dashed #c82c55 1px;}
a{
text-decoration:none;
border-bottom:dashed #c82c55 1px;}
a:link{
text-decoration:none;}
a:visited{
text-decoration:none;}
a:hover{
text-decoration:none;
color:#c82c55;}
input,textarea,select,option{
color:#c82c55;
background-color:#ffffff;
border:solid 1px #cccccc;}
</style></nopc>
※スマホの画面に合わせた表示になるサイト
<!--検索避けタグ-->
<META NAME="ROBOTS" CONTENT="NOINDEX">
<META NAME="ROBOTS" CONTENT="NOFOLLOW">
<META NAME="ROBOTS" CONTENT="NOARCHIVE">
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE">
<META NAME="ROBOTS" CONTENT="NONE">
<meta name="robots" content="noindex">
<meta name="robots" content="nofollow">
<meta name="robots" content="noarchive">
<meta name="robots" content="noindex,nofollow,noarchive">
<meta name="robots" content="none">
<META NAME="GOOGLEBOT" CONTENT="NOINDEX">
<META NAME="GOOGLEBOT" CONTENT="NOFOLLOW">
<META NAME="GOOGLEBOT" CONTENT="NOARCHIVE">
<META NAME="GOOGLEBOT" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE">
<MATA NAME="GOOGLEBOT" CONTENT="NONE">
<meta name="googlebot" content="noindex">
<meta name="googlebot" content="nofollow">
<meta name="googlebot" content="noarchive">
<meta name="googlebot" content="noindex,nofollow,noarchive">
<meta name="googlebot" content="none">
<META NAME="LIBWWW-PERL" CONTENT="NOINDEX">
<META NAME="LIBWWW-PERL" CONTENT="NOFOLLOW">
<META NAME="LIBWWW-PERL" CONTENT="NOARCHIVE">
<META NAME="LIBWWW-PERL" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE">
<META NAME="LIBWWW-PERL" CONTENT="NONE">
<meta name="libwww-perl" content="noindex">
<meta name="libwww-perl" content="nofollow">
<meta name="libwww-perl" content="noarchive">
<meta name="libwww-perl" content="noindex,nofollow,noarchive">
<meta name="libwww-perl" content="none">
<!--検索避けタグ-->
<pc_only><style type="text/css"><!--
body{
text-align:center;
scrollbar-face-color:#ffffff;
scrollbar-3dlight-color:#5492cf;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ffffff;
scrollbar-darkshadow-color:#5492cf;
scrollbar-arrow-color:#5492cf;
scrollbar-track-color:#ffffff;
font-family:'メイリオ',Verdana, Arial, Osaka, Helvetica, sans-serif;}
br {letter-spacing:0;}
.layout{
width:550px;
text-align:left;
padding:25px;
margin:0 auto;
line-height:2.0;
letter-spacing:2px;
font-family:'メイリオ',Verdana, Arial, Osaka, Helvetica, sans-serif;
font-size:84%;}
.top{
font-family:Times New Roman, Arial;
font-size:190%;
letter-spacing:2px;}
.midashi{
text-align:left;
padding:1% 0% 1% 4%;
border-left:solid #5492cf 10px;
border-bottom:dashed #5492cf 1px;}
.midashi02{
padding:1% 0%;
font-weight:bold;
font-size:100%;
letter-spacing:2px;}
.line{
padding:1% 0% 2% 3%;
letter-spacing:2px;
font-family:Arial, Osaka, Helvetica, sans-serif;
border-bottom:solid #5492cf 1px;
border-left:solid #5492cf 1px;}
.footer{
text-align:right;
padding:1% 0% 0% 0%;
letter-spacing:2px; border-top:dashed #5492cf 1px;}
a{
text-decoration:none;
border-bottom:dashed #5492cf 1px;}
a:link{
text-decoration:none;}
a:visited{
text-decoration:none;}
a:hover{
text-decoration:none;
color:#5492cf;
position:relative;top:1pt;left:1pt;}
input,textarea,select,option{
padding:1px 3px;
margin:1px 1px;
font-family:メイリオ;
font-size:92%;
color:#5492cf;
background-color:#ffffff;
border:solid 1px #cccccc;}
--></style></pc_only>
<smartphone><style type="text/css"><!--
body{
text-align:left;
margin:3% 4%;
line-height:1.7;
letter-spacing:1px;
font-size:82%;}
.top{
font-family:Times New Roman, Arial;
font-size:150%;
letter-spacing:2px;}
.midashi{
text-align:left;
padding:2% 0% 2% 4%;
border-left:solid #5492cf 8px;
border-bottom:dashed #5492cf 1px;}
.midashi02{
padding:1% 0%;
font-weight:bold;
font-family:Arial;
letter-spacing:1px;}
.line{
padding:1% 0% 2% 3%;
letter-spacing:2px;
font-family:Arial, Osaka, Helvetica, sans-serif;
border-bottom:solid #5492cf 1px;
border-left:solid #5492cf 1px;}
.footer{
text-align:right;
padding:1% 0% 0% 0%;
letter-spacing:2px;
border-top:dashed #5492cf 1px;}
a{
text-decoration:none;
border-bottom:dashed #5492cf 1px;}
a:link{
text-decoration:none;}
a:visited{
text-decoration:none;}
a:hover{
text-decoration:none;
color:#5492cf;}
input,input[type="text"],input[type="number"],input[type="password"],input[type="submit"]{
width:auto;
padding-right:8px;
padding-left:8px;
margin:1px;
color:#5492cf;
background-color:#ffffff;
border:solid 1px #cccccc;}
textarea,select,option{
color:#5492cf;
background-color:#ffffff; border:solid 1px #cccccc;}
input:focus{
color:#5492cf;
background-color:#ffffff;
border:solid 1px #cccccc;}
textarea:focus{
color:#5492cf;
background-color:#ffffff;
border:solid 1px #cccccc;}
--></style></smartphone>
<nopc><style type="text/css">
body{
text-align:left;
padding:4% 5%;
line-height:110%;
letter-spacing:1px;
font-size:82%;}
.top{
font-size:120%;
letter-spacing:1px;}
.midashi{
text-align:left;
padding:2% 0% 2% 4%;
border-left:solid #5492cf 8px;
border-bottom:dashed #5492cf 1px;}
.midashi02{
padding:1% 0%;
font-weight:bold;
letter-spacing:1px;}
.line{
padding:1% 0% 2% 3%;
letter-spacing:1px;
border-bottom:solid #5492cf 1px;
border-left:solid #5492cf 1px;}
.footer{
text-align:right;
padding:1% 0% 0% 0%;
letter-spacing:2px;
border-top:dashed #5492cf 1px;}
a{
text-decoration:none;
border-bottom:dashed #5492cf 1px;}
a:link{
text-decoration:none;}
a:visited{
text-decoration:none;}
a:hover{
text-decoration:none;
color:#5492cf;}
input,textarea,select,option{
color:#5492cf;
background-color:#ffffff;
border:solid 1px #cccccc;}
</style></nopc>
pc
[編集]
by 匿名
2017-12-16 00:23
http://nanos.jp/nanossupport/bbs/3/list?ThreadID=1991&viewType=thread
↑の774774さんの回答を試してみてください。
pc
[編集]
by 空
2017-12-17 19:01
匿名様、ご回答ありがとうございます。
774774様のご回答を参考にさせて頂いた結果、無事に解決することが出来ました。
この度は誠にありがとうございました。
pc
[編集]
[返信する]
[
戻る
]
[返信する]]
2017-12-14 23:51
pc
戻る
]