ここに私のサイトへのリンクがあります。そこから私のコードのすべてを見ることができますが、私の問題を引き起こしていると思われるコードを以下に示します。 Dustindowell.com/blog
モバイル ブラウザーでレスポンシブ サイトのメディア クエリを使用してこのサイトを設計している最中ですが、これがわかりません。デスクトップ ブラウザでは正常に動作しますが、Opera、Firefox、または Chrome を使用して携帯電話にアクセスし、「サイドバー」(メイン コンテンツ ポストの下にバブル イメージと私のtwitter ユーザー名) 残りのコンテンツのようにスケーリングしません。
理由がわかりません。サイト全体を ems でデザインしましたが、表示されるピクセル単位はありません。私はそれをdivに切り替えようとしましたが、ページには完全にうまくスケーリングする別のものもあるので、それは問題ではありません。私は本当にアイデアがありません。
編集:フッターもスケーリングされていないことを追加したかっただけです。私が考えることができる唯一のことは、何らかの形でスケーリングに影響を与えるGoogleフォントですか？ページの他の場所に Google フォントがありますが、影響を受けていないようです。
編集：もう1つ。私が話しているテキストは、すべて視覚的に同じサイズでなければなりません。postSidebar またはフッターに font-size:200% を設定しても、まだスケーリングされません。
編集: 問題の原因となっている Google フォントを除外しました。
編集: Android ブラウザーでサポートされていない calc プロパティを除いて、そこでは完全に正常に動作するようです。
編集:私は問題を解決しようと懸命に取り組んできましたが、何も違いがないようです。フッターや余白が原因で拡大縮小できないという事実ではありません。それは段落タグにあるという事実ではありません。#contentContainer の内側ではなく、#content div の外側にあるという事実です。私は完全に途方に暮れており、どういうわけかブラウザが私のコンテンツが何であるかを何らかの形で決定していること、そしてそれがユーザーが読むために拡大されるべき唯一のものであり、ほんの数語の長さのものであることをほぼ確信しています. 、すべてのテキストが動作するように設定したルールに従う時が来ました。
また、この質問にコードを更新して追加しました。
編集：私はこのように編集していることを理解しています。しかし、私は別の更新があります。テキストを拡大縮小すると font-size:500%; サイトは、比例して正しいですが、500x から大きいです。なぜプロポーションがずれているのかまだわからず、気が狂ってしまいます。
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dustin Dowell</title>
<link href='http://fonts.googleapis.com/css?family=Contrail+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<link href="css/faces.css" rel="stylesheet" type="text/css">
<link href="glider/featuredcontentglider.css" rel="stylesheet" type="text/css">
<!-- Media Query needs precedence over all stylesheets -->
<link href="css/mediaQuery.css" rel="stylesheet" type="text/css">
<link href="css/mediaQueryMobile.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="glider/featuredcontentglider.js">
// /***********************************************
// * Featured Content Glider script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
// * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
// * This notice must stay intact for legal use
// ***********************************************/
</script>
<!--
=================================================================
This site was created by Dustin Dowell, Copyright 2013
Do not copy, modify, or redistribute this design.
=================================================================
-->
</head>
<body>
<div id="displayPercentage">
<ul>
<li>Current Page Scaling: 75% <a href="">What is this?</a></li>
<li>Current Page Scaling: 100% <a href="">What is this?</a></li>
<li>Current Page Scaling: 125% <a href="">What is this?</a></li>
<li>Current Page Scaling: 150% <a href="">What is this?</a></li>
<li>Current Page Scaling: 175% <a href="">What is this?</a></li>
<li>Current Page Scaling: 200% <a href="">What is this?</a></li>
</ul>
</div>
<header>
<div id="headerContent">
<div id="logo"></div>
<div id="headline">
<h1 id="title">Life of Geek</h1>
<h2 id="tagline">Energy Drinks and Microwavable Food</h2>
</div>
<nav>
<a class="current" href="">News</a>
<a href="">Apps</a>
<a href="">Galleries</a>
<a href="">Cool Stuff</a>
</nav>
<div class="Clear"></div>
</div>
</header>
<div id="pageContainer">
<div id="slideShowContainer">
<script type="text/javascript">
featuredcontentglider.init({
gliderid: "glideContainer", //ID of main glider container
contentclass: "glideContent", //Shared CSS class name of each glider content
togglerid: "glideSelect", //ID of toggler container
remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
selected: 0, //Default selected content index (0=1st)
persiststate: false, //Remember last content shown within browser session (true/false)?
speed: 750, //Glide animation duration (in milliseconds)
direction: "rightleft", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
autorotate: true, //Auto rotate contents (true/false)?
autorotateconfig: [6000, 200], //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
onChange: function(previndex, curindex, $allcontents){ // fires when Glider changes slides
//custom code here
}
})
</script>
<div id="glideSelect" class="glideContentToggler">
<a href="#" class="prev" id="togglerLeft"></a>
<a href="#" class="next" id="togglerRight"></a>
<div class="clear"></div>
</div>
<div id="glideContainer" class="glideContentWrapper">
<div class="glideContent">
<img src="images/glider/slide1.png" alt="">
</div>
<div class="glideContent">
<img src="images/glider/slide1.png" alt="">
</div>
<div class="glideContent">
<img src="images/glider/slide1.png" alt="">
</div>
</div>
</div>
<div id="contentContainer">
<section id="content">
<article class="post">
<h1>The title of this blog post.</h1>
<h2>Posted June 28, 2013</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad m i n im veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in v oluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad m i n im veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in v oluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<aside class="postSidebar">
<div class="authorImage">
<div class="dustinFace">
<div class="bubble"></div>
</div>
</div>
<div class="postSidebarText">
<p>Dustin Dowell</p>
<p>@dustindowell22</p>
</div>
<div class="clear"></div>
</aside>
<div class="clear"></div>
<article class="post">
<h1>The title of this blog post.</h1>
<h2>Posted June 28, 2013</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<aside class="postSidebar">
<div class="authorImage">
<div class="dustinFace">
<div class="bubble"></div>
</div>
</div>
<div class="postSidebarText">
<p>Dustin Dowell</p>
<p>@dustindowell22</p>
</div>
<div class="clear"></div>
</aside>
<div class="clear"></div>
</section>
<aside id="sidebar">
<article class="sidePost">
<h1>Sidebar Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</aside>
<div class="clear"></div>
<footer>
<p>Copyright © 2013 Dustin Dowell</p>
</footer>
</div>
</div>
</body>
</html>
モバイル メディア クエリ CSS:
@charset "UTF-8";
/* CSS Document */
/* ////////// Mobile Resolution ////////// */
/* 50px negative gap for good measure */
/* Portrain CSS */
@media only screen
and (orientation: portrait)
{
body{
min-width:48em; /* 768px */
font-size:125%;
}
#displayPercentage{
display:none;
}
/* Header */
header{
height:12em;
}
#headerContent{
width:inherit;
}
#headline{
font-size:75%;
margin-left:21.5em;
}
nav{
float:right;
}
/* Page */
#pageContainer{
width:100%;
}
/* SlideShow */
#slideShowContainer{ /* to complicated to fit in design accurately, also can run slow on some phones */
display:none;
}
/* Content */
#contentContainer{
width:calc(100% - 3em);
padding-top:1.5em; /* cancels out padding, padding should be applied to content and sidebar elments instead */
}
#content{
width:100%;
margin-right:0;
}
/* Post */
.post{
width:100%;
}
/* Post Sidebar */
.postSidebar{
width:100%;
margin-bottom:1.5em;
}
.authorImage{
font-size:50%;
float:left;
margin:0;
}
.postSidebarText{
margin-top:1em;
margin-left:6em;
}
.postSidebar p{
text-align:left;
}
/* Sidebar */
#sidebar{
width:100%;
margin-bottom:1.5em;
}
.sidePost{
width:100%;
margin:0;
}
/* Footer */
footer{
width:100%; /* redundant */
}
}
通常のスタイルシート CSS:
@charset "UTF-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
body{
min-width:70em; /* largest width to prevent horizontal scrolling */
font-size:100%; /* keep in divisors of 25 or rounding will cause breaks, but never below 75% or webkit will break */
line-height:1.5em; /* line height for the entire page */
font-family: 'Crimson Text', serif;
background-image:url(../images/layout/bg.png);
background-size:.5em; /* 8 instead of 16 so it doesn't look blurry on retina */
}
.clear{
clear:both;
}
#displayPercentage{
height:1.5em;
margin-left:.25em;
position:absolute;
top:0;
overflow:hidden;
font-weight:normal;
font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
color:rgba(191,191,191,1);
}
#displayPercentage a{
margin-left:1em;
}
/* ////////// Links ////////// */
a:link{
color:rgba(128,204,255,1);
text-decoration:none;
}
a:visited{
color:rgba(128,204,255,1);
}
a:hover{
color:rgba(128,204,255,1);
text-decoration:underline;
}
a:active{
color:rgba(128,204,255,1);
}
/* ////////// Header ////////// */
header{
height:12em;
margin-top:3em; /* margin at top of page */
background-image:-webkit-linear-gradient(rgba(51,51,51,1), rgba(26,26,26,1));
background-image: -moz-linear-gradient(rgba(51,51,51,1), rgba(26,26,26,1));
background-image: -o-linear-gradient(rgba(51,51,51,1), rgba(26,26,26,1));
background-image: linear-gradient(rgba(51,51,51,1), rgba(26,26,26,1));
}
#headerContent{
width:64em; /* width of the content in the header so it can be centered */
margin:auto;
}
#logo{
width:15em; /* 240px */
height:15em; /* 240px */
margin-top:-1.5em; /* for overhang */
border-radius:15em;
position:absolute; /* prevents interference because of overhang */
z-index:2000;
background-image:url(../images/logo.svg);
background-size:contain;
}
#headline{
white-space:nowrap; /* prevents word wrap on small window sizes */
margin-left:16.25em; /* this is just what looks decent. no math here */
margin-top:3.25em; /* this is just what looks decent. no math here */
position:absolute; /* prevents messing with nav bar float right */
}
#title{ /* keep title short or it will break the design */
line-height:.8em; /* i don't know why this number works perfectly */
font-size:6em;
font-weight:normal;
font-family: 'Contrail One', sans-serif;
color:rgba(255,255,255,1);
}
#tagline{
line-height:1.5em;
font-size:1.5em;
font-weight:normal;
font-family: 'Contrail One', sans-serif;
color:rgba(255,255,255,1);
text-indent:.0625em;
}
/* ////////// Navigation ////////// */
nav{
height:3em;
margin-top:9em;
margin-right:1.5em;
float:right;
font-weight:normal;
font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
}
nav a{
display:block;
height:.8em; /* 1 / 1.25 */ /* prevents border from acting stupid */
margin-left:.8em;/* for spacing between links */ /* 1 / 1.25 */
padding-bottom:1.44em; /* 1.8 / 1.25 */
border-bottom:.16em solid rgba(0,0,0,0); /* .2 / 1.25 */
float:left;
font-size:1.25em; /* has to be defined here to prevent wonky changes elsewhere */
text-transform:uppercase;
text-decoration:none;
}
nav a.current{ /* a class applied to the link of the current page */
border-color:rgba(255,255,255,1);
}
nav a:link{
color:rgba(255,255,255,1);
text-decoration:none; /* cancles out normal link style */
}
nav a:visited{
color:rgba(255,255,255,1);
}
nav a:hover{
color:rgba(128,204,255,1);
border-color:rgba(128,204,255,1);
}
nav a:active{
color:rgba(128,204,255,1);
}
/* ////////// Page ////////// */
#pageContainer{
width:64em;
margin:auto;
}
/* ////////// Content ////////// */
#contentContainer{
width:61em;
padding:1.5em;
background-color:rgba(255,255,255,1);
box-shadow:inset 0 -1px 0 1px rgba(0,0,0,.1);
}
#content{
width:43.5em;
margin-right:1.5em;
float:left;
}
/* ////////// Post ////////// */
.post{
width:32em;
margin-bottom:1.5em;
float:right;
}
.post h1{
font-size:2em;
font-weight:normal;
font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
}
.post h2{
margin-left:0.125em; /* for aligning with title better */
font-size:1em;
font-weight:normal;
font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
color:rgba(191,191,191,1); /* gray */
}
.post h3, .post h4, .post h5, .post h6{
font-size:1em;
font-weight:normal;
font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
color:rgba(191,191,191,1); /* gray */
}
.post p{
text-indent:1em;
}
/* ////////// Post Sidebar ////////// */
.postSidebar{
width:10em;
float:left;
font-weight:normal;
font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
}
.postSidebar p{
text-align:center;
color:rgba(191,191,191,1);
}
/* ////////// Sidebar ////////// */
#sidebar{
float:right;
width:16em;
}
.sidePost{
margin-bottom:1.5em;
}
.sidePost h1, .sidePost h2, .sidePost h3, .sidePost h4, .sidePost h5, .sidePost h6{
font-size:1em;
font-weight:normal;
font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
}
.sidePost p{
text-indent:1em;
}
/* ////////// Footer ////////// */
footer p{
font-weight:normal;
font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
text-align:center;
}