<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>gototake blog &#187; Javascript</title>
	<atom:link href="https://blog.gototake.com/?cat=9&#038;feed=rss2" rel="self" type="application/rss+xml" />
	<link>https://blog.gototake.com</link>
	<description>自分用メモ</description>
	<lastBuildDate>Mon, 21 Nov 2016 12:04:51 +0000</lastBuildDate>
	<language>ja</language>
		<sy:updatePeriod>hourly</sy:updatePeriod>
		<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.8.1</generator>
	<item>
		<title>スマホでピンチアウトして拡大した時に、一撃でデフォルトサイズに戻す方法</title>
		<link>https://blog.gototake.com/?p=174</link>
		<comments>https://blog.gototake.com/?p=174#comments</comments>
		<pubDate>Sun, 17 Apr 2016 15:00:21 +0000</pubDate>
		<dc:creator><![CDATA[admin]]></dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://blog.gototake.com/?p=174</guid>
		<description><![CDATA[1 2 3 4 5 6 7 8 9 10 11 12 13 function resetScale&#40;&#038; [&#8230;]]]></description>
				<content:encoded><![CDATA[<style type="text/css">
.bwp-syntax-wrapper li {white-space: normal;}
</style>
<div class="bwp-syntax-block clearfix">
<div class="bwp-syntax-toolbar">
<div class="bwp-syntax-control"><a href="javascript:;" class="bwp-syntax-source-switch" title="View Source Code"></a></div>
</div>
<div class="bwp-syntax-wrapper clearfix bwp-syntax-simple">
<table class="php">
<tbody>
<tr class="li1">
<td class="ln">
<pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
</pre>
</td>
<td class="de1">
<pre class="de1"><span class="kw2">function</span> resetScale<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span>
&nbsp; &nbsp; <span class="kw2">var</span> metalist <span class="sy0">=</span> document<span class="sy0">.</span>getElementsByTagName<span class="br0">&#40;</span><span class="st_h">'meta'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp; &nbsp; <span class="kw2">var</span> target <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span>
&nbsp; &nbsp; <span class="kw1">for</span><span class="br0">&#40;</span><span class="kw2">var</span> i <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span> i <span class="sy0">&lt;</span> metalist<span class="sy0">.</span>length<span class="sy0">;</span> i<span class="sy0">++</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> name <span class="sy0">=</span> metalist<span class="br0">&#91;</span>i<span class="br0">&#93;</span><span class="sy0">.</span>getAttribute<span class="br0">&#40;</span><span class="st_h">'name'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span><span class="br0">&#40;</span>name <span class="sy0">&amp;&amp;</span> name<span class="sy0">.</span>toLowerCase<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">===</span> <span class="st_h">'viewport'</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; metalist<span class="br0">&#91;</span>i<span class="br0">&#93;</span><span class="sy0">.</span>setAttribute<span class="br0">&#40;</span><span class="st_h">'content'</span><span class="sy0">,</span> <span class="st_h">'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target <span class="sy0">=</span> i<span class="sy0">;</span>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">break</span><span class="sy0">;</span>
&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span>
&nbsp; &nbsp; <span class="br0">&#125;</span>
&nbsp; &nbsp; metalist<span class="br0">&#91;</span>target<span class="br0">&#93;</span><span class="sy0">.</span>setAttribute<span class="br0">&#40;</span><span class="st_h">'content'</span><span class="sy0">,</span> <span class="st_h">'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=yes'</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre>
</td>
</tr>
</tbody>
</table>
</div>
<div class="bwp-syntax-source">
<pre class="no-parse">function resetScale(){
	var metalist = document.getElementsByTagName('meta');
	var target = 0;
	for(var i = 0; i &lt; metalist.length; i++) {
		var name = metalist[i].getAttribute('name');
		if(name &amp;&amp; name.toLowerCase() === 'viewport') {
			metalist[i].setAttribute('content', 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no');
			target = i;
			break;
		}
	}
	metalist[target].setAttribute('content', 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=yes');
}</pre>
</div>
</div>
]]></content:encoded>
			<wfw:commentRss>https://blog.gototake.com/?feed=rss2&#038;p=174</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Androidで縦書きをぴったり画面サイズに合わせるJS</title>
		<link>https://blog.gototake.com/?p=172</link>
		<comments>https://blog.gototake.com/?p=172#comments</comments>
		<pubDate>Sun, 17 Apr 2016 14:55:10 +0000</pubDate>
		<dc:creator><![CDATA[admin]]></dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://blog.gototake.com/?p=172</guid>
		<description><![CDATA[epubビューアーを作ろうと思って、縦書き表示をCSSで作ったのだけど、Androidで、1行が画面ピッタリに [&#8230;]]]></description>
				<content:encoded><![CDATA[<p>epubビューアーを作ろうと思って、縦書き表示をCSSで作ったのだけど、Androidで、1行が画面ピッタリに表示されない。<br />
ロードされた段階で自動的に謎のサイズに拡大されている。1行が、横書きの時に収まるサイズで計算されている気がする。<br />
CSSだけで頑張りたかったけど、うまくいかないので、JSで。</p>
<style type="text/css">
.bwp-syntax-wrapper li {white-space: normal;}
</style>
<div class="bwp-syntax-block clearfix">
<div class="bwp-syntax-toolbar">
<div class="bwp-syntax-control"><a href="javascript:;" class="bwp-syntax-source-switch" title="View Source Code"></a></div>
</div>
<div class="bwp-syntax-wrapper clearfix bwp-syntax-simple">
<table class="php">
<tbody>
<tr class="li1">
<td class="ln">
<pre class="de1">1
2
3
4
5
6
7
8
9
10
</pre>
</td>
<td class="de1">
<pre class="de1">$<span class="br0">&#40;</span>document<span class="br0">&#41;</span><span class="sy0">.</span>ready<span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span>
&nbsp; &nbsp; <span class="kw2">var</span> chars <span class="sy0">=</span> <span class="nu0">40</span><span class="sy0">;</span><span class="co1">//一行あたりの文字列</span>
&nbsp; &nbsp; <span class="kw2">var</span> zoomer <span class="sy0">=</span> document<span class="sy0">.</span>body<span class="sy0">.</span>clientWidth <span class="sy0">/</span> window<span class="sy0">.</span>innerWidth<span class="sy0">;</span>
&nbsp; &nbsp; <span class="kw2">var</span> realHeight <span class="sy0">=</span> $<span class="br0">&#40;</span>window<span class="br0">&#41;</span><span class="sy0">.</span>height<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">/</span> zoomer<span class="sy0">;</span>
&nbsp; &nbsp; <span class="kw2">var</span> fontSize <span class="sy0">=</span> realHeight<span class="sy0">/</span>chars<span class="sy0">;</span>
&nbsp; &nbsp; $<span class="br0">&#40;</span><span class="st0">&quot;.wrapper&quot;</span><span class="br0">&#41;</span><span class="sy0">.</span>height<span class="br0">&#40;</span>realHeight<span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp; &nbsp; $<span class="br0">&#40;</span><span class="st0">&quot;.wrapper&quot;</span><span class="br0">&#41;</span><span class="sy0">.</span>css<span class="br0">&#40;</span><span class="st0">&quot;padding&quot;</span><span class="sy0">,</span><span class="br0">&#40;</span>fontSize<span class="sy0">*</span><span class="nu0">1</span><span class="br0">&#41;</span><span class="sy0">+</span><span class="st0">&quot;px&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp; &nbsp; $<span class="br0">&#40;</span><span class="st0">&quot;.wrapper&quot;</span><span class="br0">&#41;</span><span class="sy0">.</span>css<span class="br0">&#40;</span><span class="st0">&quot;font-size&quot;</span><span class="sy0">,</span>fontSize<span class="sy0">+</span><span class="st0">&quot;px&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp; &nbsp; $<span class="br0">&#40;</span>window<span class="br0">&#41;</span><span class="sy0">.</span>scrollLeft<span class="br0">&#40;</span><span class="nu0">0</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre>
</td>
</tr>
</tbody>
</table>
</div>
<div class="bwp-syntax-source">
<pre class="no-parse">$(document).ready(function(){
	var chars = 40;//一行あたりの文字列
	var zoomer = document.body.clientWidth / window.innerWidth;
	var realHeight = $(window).height() / zoomer;
	var fontSize = realHeight/chars;
	$(".wrapper").height(realHeight);
	$(".wrapper").css("padding",(fontSize*1)+"px");
	$(".wrapper").css("font-size",fontSize+"px");
	$(window).scrollLeft(0);
});</pre>
</div>
</div>
]]></content:encoded>
			<wfw:commentRss>https://blog.gototake.com/?feed=rss2&#038;p=172</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
