タグ「viewport」 - はてブログ

タグ viewport

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 20 / 20件)

【Chrome】textareaの改行時にカーソル位置がガタっとずれる問題の対処法

2021/02/20 36 users textarea イメカタスクラップエディター

Enterキーを押すとtextareaのスクロール位置がずれる問題ふとZennのスクラップのエディターで、Enterキーを押すと、カーソルのあたっている部分のスクロール位置がガタっとずれる問題が発生することに気づきました。 Enterキーを押したタイミングでカーソルの位置がviewportの先頭もしくは末尾にジャンプするようなイメ... 続きを読む

Google、SEOに適したLazyloadの仕様を公開 | 海外SEO情報ブログ

2018/11/06 324 users LazyLoad SEO 指針仕様ドキュメント

[レベル: 上級] SEO と相性がいい Lazyload の実装を解説するドキュメントを Google はデベロッパー向けサイトで公開しました。 3つのアドバイスドキュメントには3つの指針が書かれています。 1. viewport 内で見えるようにするviewport 内にあるコンテンツは、必ず Google にも見えるようにしておきます（viewport は簡... 続きを読む

スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part1｜Takumi Hasegawa (unshift)｜note

2018/09/19 90 users unshift ＨＡＳＥＧＡＷＡ破綻 Note エンジニア

スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part1 基本的には実装側で見え方に破綻がないようにしますが、実機でみたときにデザイナーさんは自分でデザインしたものとは少なからず違うものがあがってくるはずなので、違和感を感じるこ... 続きを読む

2017/04/25 33 users initial-scale device-width

<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http-equiv = "X-UA-Compatible" content = "i... 続きを読む

もう逃げない。HTMLのviewportをちゃんと理解する - Qiita

2015/06/10 816 users Qiita width content 呪文解像度

CSSのcanvasとviewportとposition:fixedとpinch zoom - snyk_s log

2015/01/09 32 users canvas Terminology position 概念

2015-01-09 CSSのcanvasとviewportとposition:fixedとpinch zoom css browser specを元にした概念の整理間違いあったら教えて欲しい CSS 2.1におけるviewport CSS 2.1におけるviewportを説明するにあたり、以下のterminologyが必要となる canvas For instance, user agents... 続きを読む

スマートフォンサイト制作で「なんで拡大縮小できるようにしてるの？」と言われた時の対処法 | Border/memo

2014/10/16 368 users border memo device-width width

※ この話はフィクションです。実在の人物や団体などとは関係ありませんスマートフォンサイトを制作していて、「サイトを自由に拡大縮小できるようにしてるのは理由あんの？」と言われた時の場合の話です。 Viewportの設定どうしてたか <meta name="viewport" content="width=device-width"> これだけ。こうするとサイトの幅=デバイスの幅になり、拡大縮小は自... 続きを読む

レスポンシブWebデザインはviewportとメディアクエリーからはじめろ！ | 株式会社Bark to Imagine

2014/01/07 313 users 横幅キリン住友商事概念ブラウザ

今話題の「レスポンシブWebデザイン」。有名なところでは、「TOYOTA新卒採用ページ」、「キリン」、「住友商事」などがあります。ブラウザの横幅に応じて適切なデザインを表示する技術ですが、実際はどのような目的で使われているのでしょう。今回はそんな「レスポンシブWebデザイン」の概念から記述方法までといった、次世代Webサイトの入門的な内容をわかりやすく解説していきます。レスポンシブWe... 続きを読む

iOSにおけるviewportの指定方法による細かい違い - to-R

2013/10/11 55 users iPhone iOS device-width width

iOSではviewportの指定方法が異なると細かいデバイスの挙動が変わってきます。検証はiPhone(iOS6.1)のみで行っているのでiPadやiOS7ではちょっと違うかも。まず、以下のような数値によるviewport指定をPCモードとし、 <meta name="viewport" content="width=960px"> 以下のようなdevice-widthによるviewport指... 続きを読む

「和製GitHub」を無料で提供--ビズリーチがエンジニア向けのコラボレーションサービス - CNET Japan

2013/05/29 29 users コラボレーションサービス gitBREAK ビズリーチ年収

ビズリーチは5月29日、無料リポジトリサービスを中心としたコラボレーションサービス「cedebreak;（コードブレイク）」の提供を開始した。 cedebreak;は、無料、容量無制限のプライベートリポジトリサービス「gitBREAK」や、招待制ミートアップを開催できる「cafeTERIA」、他人のスキルや年収が分かる「viewPORT」、スキルのにあった求人案件が分かる「jobBOARD」といっ... 続きを読む

スマートフォン対応でよく使うhtml、css、javascriptのまとめ | 69log

2013/02/15 897 users CSS HTML JavaScript ウェブアプリ iOS

スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 ■headタグ内での設定  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!... 続きを読む

これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ - てっく煮ブログ

2013/02/14 1141 users HTML 見た目 web 使い勝手煮ブログ

スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。パターン1: 何も考えずに HTML を書くまずは、viewpor... 続きを読む

IE10とHTML5とCSS3とレスポンシブデザインと | DECONCEPTER

2012/10/24 125 users DECONCEPTER レスポンシブデザイン IE1 最低限

ウェブサイトのWindows 8 向け対応 iPad Miniややたら薄いiMacが発表されて賑わっている中恐縮だが、今日はIE10にWEBサイトを対応させるために最低限押さえておきたいポイントを見ていきたいと思う。スナップモードとデスクトップモードがあるWindows 8のIE10にウェブサイトを最適化させるにはいくつかポイントがあるようだ。 IE10独自のviewport 実はまだviewp... 続きを読む

レスポンシブなレイアウトをON/OFFできるようにするJS「ReView」:phpspot開発日誌

2012/10/01 36 users REVIEW phpspot開発日誌レイアウト PC版機能

ReView. The Responsive Viewport. レスポンシブなレイアウトをON/OFFできるようにするJS「ReView」。 viewportを設定してサイトの幅を調整し、レスポンシブなレイアウトをスマホでON/OFFできます。 PC版にスイッチできるサイトが多い中、単にレスポンシブで作ったはいいけどPC版にスイッチする機能も作らなきゃという時に使ってみてもよいかも。こうしてJ... 続きを読む

iOS でサポートされた viewport 以外の meta タグ

2012/08/26 52 users メタタグ iOS Yes Black content

前回の記事のついでに viewport 以外の iOS でサポートされているメタタグについて整理してみましょう。 Supported Meta Tags <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"... 続きを読む

続：Androidブラウザでviewportのwidth指定[to-R]

2012/01/06 161 users BIND functio window to-R スクリプト

続：Androidブラウザでviewportのwidth指定 Check Tweet １年ほど前にAndroidブラウザでviewportのwidth指定という記事を書いたのですが、１年間いろんな端末や状況に対応しているうちに今は結構違うスクリプトを利用しています。 var portraitWidth,landscapeWidth; $(window).bind("resize", functio... 続きを読む

[CSS]iPadの横向きと縦向きでレイアウトを変更するスタイルシート | コリス

2011/10/23 146 users コリス横向き CSS width content

Portraitモード（縦向き）のグリッド設計グリッド 768=30+708+30 708=216+30+216+30+216 実装のポイント iPadの横向きと縦向きでレイアウトを変更するには2つのポイントがあります。 METAタグ iPadのスクリーンで等倍に表示されるように、METAタグで設定します。 <meta name="viewport" content="width=768px, ... 続きを読む

iPhone Safariでドキュメントの幅はどうやって決定されるか - Takazudo hamalog

2011/06/05 55 users Takazudo hamalog ドキュメント width

まずはじめに、これは合ってるかわかりません…。でもたぶん合ってると思う。 width=device-width, initial-scale=1で、iPhoneを縦→横に傾けたら、「1.5倍にズームした状態でさらにドキュメントの幅が480pxになる」という謎の挙動を理解してみる。 viewportについては、Androidの動きを正と見て、iPhoneの挙動を理解したほうが容易。 initial... 続きを読む

Androidの「target-densitydpi」でviewportの調整[to-R]

2011/01/31 71 users dpi プロパティ to-R Android 調整

Androidの「target-densitydpi」でviewportの調整CheckTweetどうも色々調べているとAndroidのviewport調整はtarget-densitydpiというプロパティで行うのがよさそうです。「target-densitydpi」はAndroid2.0以上で利用でき、表示時のdpi(dots per inch/1インチの中に何ドット表示するか)を指定できます... 続きを読む

スマートフォン向けサイトの作り方｜ユージック

2011/01/22 1903 users ユージック iPhone height 作り方ズーム

iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。スマートフォン独自の仕様 viewportについてスマートフォンでの可視領域やズームなどの設定をするmeta要素がviewportです。 viewportの各プロパティ width(幅) 可視領域の幅。デフォルト値は980px。 200pxから10000pxまでの範囲を指定できる。 height（高さ... 続きを読む