「ボリュームボタンのマイナス」 と
「電源ボタン」の
同時の長押し
です。
－スマホ
メモ（あとで読もう）モバイルサイト、料金
一般的な料金
http://surviblog.com/freelance-design-fee-price/
モバイルサイト構築に関して、
http://services.google.com/fh/files/blogs/principles-of-mobile-site-design-ja.pdf
CSSで形をつくる
これは面白いです。
http://css-tricks.com/examples/ShapesOfCSS/
The Shapes of CSS
All of the below use only a single HTML element. Any kind of CSS goes,
as long as it’s supported in at least one browser.
Square
[css]
<style>
#square {
width: 100px;
height: 100px;
background: red;
}
</style>
[/css]
Rectangle
[css]
<style>
#rectangle {
width: 200px;
height: 100px;
background: red;
}
</style>
[/css]
Circle
[css]
<style>
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */
</style>
[/css]
Oval
[css]
<style>
#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */
</style>
[/css]
Triangle Up
[css]
<style>
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
</style>
[/css]
Triangle Down
[css]
<style>
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
</style>
[/css]
Triangle Left
[css]
<style>
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
</style>
[/css]
Triangle Right
[css]
<style>
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
</style>
[/css]
Triangle Top Left
[css]
<style>
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
</style>
[/css]
Triangle Top Right
[css]
<style>
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
</style>
[/css]
Triangle Bottom Left
[css]
<style>
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
</style>
[/css]
Triangle Bottom Right
[css]
<style>
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
</style>
[/css]
Curved Tail Arrow via Ando Razafimandimby
[css]
<style>
#curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid red;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
#curvedarrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 3px solid red;
border-radius: 20px 0 0 0;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
</style>
[/css]
Trapezoid
[css]
<style>
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
</style>
[/css]
Parallelogram
[css]
<style>
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
}
</style>
[/css]
Star (6-points)
[css]
<style>
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
</style>
[/css]
Star (5-points) via Kit MacAllister
[css]
<style>
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: ”;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: ”;
}
</style>
[/css]
Pentagon
[css]
<style>
#pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}
</style>
[/css]
Hexagon
[css]
<style>
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
</style>
[/css]
Octagon
[css]
<style>
#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
</style>[/css]
Heart via Nicolas Gallagher
[css]
<style>
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
</style>
[/css]
Infinity via Nicolas Gallagher
[css]
<style>
#infinity {
position: relative;
width: 212px;
height: 100px;
}
#infinity:before,
#infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
[/css]
Diamond Square via Joseph Silber
[css]
<style scoped="">
#diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px;
}
#diamond:after {
content: ”;
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: red;
}
</style>
[/css]
Diamond Shield via Joseph Silber
[css]
<style scoped="">
#diamond-shield {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 20px solid red;
position: relative;
top: -50px;
}
#diamond-shield:after {
content: ”;
position: absolute;
left: -50px; top: 20px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
</style>
[/css]
Diamond Narrow via Joseph Silber
[css]
<style scoped="">
#diamond-narrow {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
top: -50px;
}
#diamond-narrow:after {
content: ”;
position: absolute;
left: -50px; top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
</style>
[/css]
Cut Diamond via Alexander Futekov
[css]
<style scoped="">
#cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
–></style></div>
<div class="shape">
<h2>Egg</h2>
<div id="egg"></div>
<style scoped=""><!–
#egg {
display:block;
width: 126px;
height: 180px;
background-color: red;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
</style>
[/css]
Pac-Man
[css]
<style scoped="">
#pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 60px solid red;
border-bottom: 60px solid red;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
–></style></div>
<div class="shape">
<h2>Talk Bubble</h2>
<div id="talkbubble"></div>
<style scoped=""><!–
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
</style>
[/css]
12 Point Burst via Alan Johnson
[css]
<style scoped="">
#burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before, #burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
}
#burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
</style>
[/css]
8 Point Burst via Alan Johnson
[css]
<style scoped="">
#burst-8 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20eg);
}
#burst-8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
}
</style>
[/css]
Yin Yang via Alexander Futekov
[css]
<style scoped="">
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
</style>
[/css]
Badge Ribbon via Catalin Rosu
[css]
<style scoped="">
#badge-ribbon {
position: relative;
background: red;
height: 100px;
width: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
#badge-ribbon:before,
#badge-ribbon:after {
content: ”;
position: absolute;
border-bottom: 70px solid red;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
top: 70px;
left: -10px;
-webkit-transform: rotate(-140deg);
-moz-transform: rotate(-140deg);
-ms-transform: rotate(-140deg);
-o-transform: rotate(-140deg);
}
#badge-ribbon:after {
left: auto;
right: -10px;
-webkit-transform: rotate(140deg);
-moz-transform: rotate(140deg);
-ms-transform: rotate(140deg);
-o-transform: rotate(140deg);
}
</style>[/css]
Space Invader via Vlad Zinculescu
[css]
<style scoped="">
#space-invader{
box-shadow:
0 0 0 1em red,
0 1em 0 1em red,
-2.5em 1.5em 0 .5em red,
2.5em 1.5em 0 .5em red,
-3em -3em 0 0 red,
3em -3em 0 0 red,
-2em -2em 0 0 red,
2em -2em 0 0 red,
-3em -1em 0 0 red,
-2em -1em 0 0 red,
2em -1em 0 0 red,
3em -1em 0 0 red,
-4em 0 0 0 red,
-3em 0 0 0 red,
3em 0 0 0 red,
4em 0 0 0 red,
-5em 1em 0 0 red,
-4em 1em 0 0 red,
4em 1em 0 0 red,
5em 1em 0 0 red,
-5em 2em 0 0 red,
5em 2em 0 0 red,
-5em 3em 0 0 red,
-3em 3em 0 0 red,
3em 3em 0 0 red,
5em 3em 0 0 red,
-2em 4em 0 0 red,
-1em 4em 0 0 red,
1em 4em 0 0 red,
2em 4em 0 0 red;
background: red;
width: 1em;
height: 1em;
overflow: hidden;
margin: 50px 0 70px 65px;
}
</style>
[/css]
TV Screen
[css]
<style scoped="">
#tv {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
#tv:before {
content: ”;
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
</style>
[/css]
Chevron via Anthony Ticknor
[css]
<style scoped="">
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px;
}
#chevron:before {
content: ”;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: red;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
#chevron:after {
content: ”;
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: red;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
</style>
[/css]
Magnifying Glass
[css]
<style>
#magnifying-glass
{
font-size: 10em; /* This controls the size. */
display: inline-block;
width: 0.4em;
height: 0.4em;
border: 0.1em solid red;
position: relative;
border-radius: 0.35em;
}
#magnifying-glass::before
{
content: "";
display: inline-block;
position: absolute;
right: -0.25em;
bottom: -0.1em;
border-width: 0;
background: red;
width: 0.35em;
height: 0.08em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
</style>
[/css]
Facebook Icon via Nathan Swartz
[css]
<style>
#facebook-icon {
background: red;
text-indent: -999em;
width: 100px;
height: 110px;
border-radius: 5px;
position: relative;
overflow: hidden;
border: 15px solid red;
border-bottom: 0;
}
#facebook-icon::before {
content: "/20";
position: absolute;
background: red;
width: 40px;
height: 90px;
bottom: -30px;
right: -37px;
border: 20px solid #eee;
border-radius: 25px;
}
#facebook-icon::after {
content: "/20";
position: absolute;
width: 55px;
top: 50px;
height: 20px;
background: #eee;
right: 5px;
}
</style>
[/css]
[css]
<style style="display: none !important;" type="text/css">
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
#demo-top-bar {
text-align: left;
background: #222;
position: relative;
zoom: 1;
width: 100% !important;
z-index: 6000;
padding: 20px 0 20px;
}
#demo-bar-inside {
width: 960px;
margin: 0 auto;
position: relative;
}
#demo-bar-buttons {
padding-top: 10px;
float: right;
}
#demo-bar-buttons a {
font-size: 12px;
margin-left: 20px;
color: white;
margin: 2px 0;
text-decoration: none;
font: 14px "Lucida Grande", Sans-Serif !important;
}
#demo-bar-buttons a:hover,
#demo-bar-buttons a:focus {
text-decoration: underline;
}
#demo-bar-badge {
display: inline-block;
width: 302px;
padding: 0 !important;
margin: 0 !important;
background-color: transparent !important;
}
#demo-bar-badge a {
display: block;
width: 100%;
height: 38px;
border-radius: 0;
bottom: auto;
margin: 0;
background: url(/images/examples-logo.png) no-repeat;
background-size: 100%;
overflow: hidden;
text-indent: -9999px;
}
#demo-bar-badge:before, #demo-bar-badge:after {
display: none !important;
}
[/css]
androidだけに適用させるCSS
Androidのバージョン違いによるレイアウトがひどいのでなんとかしたいので、こんなものを見つけました。
引用
http://kotori-blog.com/css/css_browser_selector/
『CSS Browser Selector』の使用方法
ダウンロード
下記の公式サイトの「DOWNLOAD」のところにリンクがはってあるのでそこからjsをダウンロードします。
CSS Browser Selector
『CSS Browser Selector』の読み込み
より前で、ダウンロードした「css_browser_selector.js」を読み込みます。
[html]
<script src="css_browser_selector.js" type="text/javascript"></script>
[/html]
CSSの記述方法
jsを読み込んだらあとはCSSにコードを書くだけです！
ブラウザやOS毎にCSSを記述することができます。
公式に載っている記述方法の例です。
[css]
html.gecko div#header {
margin: 1em; /*geckoエンジンのブラウザのみ*/
}
.opera #header {
margin: 1.2em; /*operaのみ*/
}
.ie .mylink {
font-weight: bold; /*ie(全バージョン)のみ*/
}
.mac.ie .mylink {
font-weight: bold; /*Macのieのみ*/
}
[/css]
OSとブラウザのセレクタの間にはスペースは入りません。
『CSS Browser Selector』で利用可能なOSのコード
利用できるOSコードの一覧載せときます。
[css]
.win {
/*Windows (全バージョン)のみ*/
}
.vista {
/*Windows Vistaのみ*/
}
.linux {
/*linux（x11とlinux）のみ*/
}
.mac {
/*Mac OSのみ*/
}
.freebsd {
/*FreeBSDのみ*/
}
.ipod {
/*iPod Touchのみ*/
}
.iphone {
/*iphoneのみ*/
}
.ipad {
/*ipadのみ*/
}
.webtv {
/*WebTVのみ*/
}
.j2me {
/*J2ME Devices（例えばOpera mini）のみ*/
}
.blackberry {
/*blackberryのみ*/
}
.android {
/*Google Androidのみ*/
}
.mobile {
/*全てのモバイルデバイスのみ*/
}
[/css]
『CSS Browser Selector』で利用可能なブラウザのコード
利用できるブラウザコードの一覧も載せときます。
[css]
.ie {
/*Internet Explorer（全バージョン）のみ*/
}
.ie8 {
/*Internet Explorer 8.xのみ*/
}
.ie7 {
/*Internet Explorer 7.xのみ*/
}
.ie6 {
/*Internet Explorer 6.xのみ*/
}
.ie5 {
/*Internet Explorer 5.xのみ*/
}
.gecko {
/*Firefox（全バージョン）とCaminoのみ*/
}
.ff2 {
/*Firefox 2のみ*/
}
.ff3 {
/*Firefox 3のみ*/
}
.ff3_5 {
/*Firefox 3.5のみ*/
}
.ff3_6 {
/*Firefox 3.6のみ*/
}
.opera {
/*Opera（全バージョン）のみ*/
}
.opera8 {
/*Opera 8.xのみ*/
}
.opera9 {
/*Opera 9.xのみ*/
}
.opera10 {
/*Opera 10.xのみ*/
}
.konqueror {
/*Konquerorのみ*/
}
.webkit {
/*Safari, NetNewsWire, OmniWeb, Shiira, Google Chromeのみ*/
}
.safari {
/*Safari, NetNewsWire, OmniWeb, Shiira, Google Chromeのみ*/
}
.safari3 {
/*Safari 3.xのみ*/
}
.chrome {
/*Google Chromeのみ*/
}
.iron {
/*SRWare Ironのみ*/
}
[/css]
まとめ
もっと早く出会いたかった！！！！
これに尽きます。
ホント簡単でシンプルですばらしすぎます。
煩わしいハックタグとはおさらばです。
保護中: Android のバグ
保護中: スマホサイト Android対応
Android ブラウザーのバグ font-size:0
最新のものではないようですが、アンドロイドに実装されているブラウザー
（ChromeのPC版とは別のもののよう）で、バグを見つけました。
英語の文献ではいくつかありましたが、日本語では初かも！！
font-size:0 に反応しないというものです。
「文字サイズが勝手に変更される」というのものは以前にも忘備しました。
その現象かと思いましたが違いました。
inputタグ内の value値をブラウザー上に表示させたくないので、調整していて気づきました。
androidブラウザー以外は特に問題なく font-size:0が効きます。
android用にtext-indent:-9999px;を追記する必要があります。
ちなみにGoogle先生のヒントの中に、
replacing 0 with very small non-zero value, e.g. 0.001px ってのがありましたが、まったくダメです。
保護中: スマホサイト
スマホ対応（iPhone特有）
スマホ対応の業務で悩んだ点がありましたので、メモ φ(..)メモメモ
ＰＣでのシュミレータでは起こらないのですが、iPhone実機では起こる現象です。
Androidでも起こらない事象です。
コントロールしているはずの文字サイズが反映されません。
原因は、iPhoneが自動で見やすいとされるサイズに、自動調整（こちらの設定を無視して）おこなっているようです。
そこで対応。
引用：http://m.designbits.jp/13031617/
情報ありがとうございます。
-webkit-text-size-adjust: 100%; がポイントらしい
-webkit-text-size-adjust: none; だと文字の拡大ができなくなるので注意。noneでなく100%
例：
[html]
/**
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
[/html]
Normalize.css を使うのがよさそう。
