javascript


Controlling Media Queries based on zoom of browser window


I was wondering if there was a way to detect the browser width. For example, if you hit ctrl + or ctrl - and the windows zooms, is there a way to style css based on that? Box is referring to a perfectly square box. So for 100% browser with I want a layout with 3 boxes and 50% I would like to style 6 boxes on the screen. Is this possible?
Example 100% browser width
box box box
Example 50% browser width
box box box box box box
That functionality is actually built into CSS media queries already. As a proof of concept, play with the magnification in your browser with this JSFiddle open.
At 50% magnification six boxes are visible, at 100%, there are only three. Note that this behavior will vary across devices.
Hope this helps!
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>
<div class="box five"></div>
body {
width: 100vw;
}
.box {
width: 50px;
height: 50px;
background: #555;
display: none;
}
#media only screen and (max-width:680px) {
.box {
display: inline-block;
}
}
#media only screen and (min-width:681px) {
.one, .two, .three {
display: inline-block;
}
}

Related Links

jQuery: Cannot check if radio button is selected
How to wire up enable on checkbox with ViewModel
jQuery dialog not working Chrome Extension
Show results from form in a div
javascript use test with regex for letters, numbers, spaces and dash
Google maps control buttons
Make an image stationary in parallax webpage?
Two if statements?
How to close toggle slider
how can i parser out my phone number by cheerio
any tagged element within a div is closing it
Highcharts drilldown chart: Display/Hide Plot Bands and Lines on drilldown or drillup
how to display countdown timer in table in js
In JavaScript, if “Strings are objects” then why not Numbers too? [duplicate]
how to get the selected list attribute value
“undefined” after using eval

Categories

HOME
gitlab-ci
floating-point
primeng
postfix-mta
duplicates
literals
exception-handling
angular2-cli
axapta
net-sftp
pytorch
nvidia
pic
tagging
docker-machine
arcobjects
react-native-ios
w3c
sensor
mantis
adf
grav
juju
code.org
fuzzy-logic
appveyor
android-camera
background-task
preg-replace
mcmc
hsm
avalondock
sinopia
modbus
fixed-point
plagiarism-detection
silverlight-4.0
zigbee
exif
disruptor-pattern
apt
username
musicxml
c#-mysql
pso
uefi
for-comprehension
google-webfonts
jquery-dirtyforms
samsung-galaxy
pgpool
enterprise-library
matplotlib-basemap
content-pages
firebase-queue
gsub
guptateamdeveloper
google-reporting-api
imagick
intel-ipp
javascript-automation
maxrequestlength
euler-angles
xctestcase
swiftyuserdefaults
perltk
django-permissions
biztalk-services
asp.net-mvc-sitemap
beyondcompare3
spynner
vanity-url
google-code
rhino-etl
self-modifying
arff
dynamic-arrays
msvc12
jrockit
in-clause
gnome-3
doctrine-mongodb
gwt-platform
graphdiff
hibernate-spatial
flatiron.js
activity-recognition
ini-set
webmatrix-2
windows-phone-7.8
telephone-api
linq-to-dataset
state-diagram
page-lifecycle
countdownlatch
drupal-menu
openca
flowlayoutpanel
word-diff
business-logic-layer
hci
f-script
abandoned
vpc

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App