I have the following media queries. The first one is for certain screens below a certain width. The second is specifically for the iPhone X. Is it possible to override the first media query when it is an iPhone X only? The following does not seem to work
#media (max-width: 449px) {
h1.question { padding: 20px 0px; }
}
#media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3) {
h1.question { padding-top: 50px !important; }
}
I believe what you're looking for is -webkit-min-device-pixel-ratio.
The -webkit-device-pixel-ratio feature is specified as a value. It is a range feature, meaning that you can also use the prefixed -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio variants to query minimum and maximum values, respectively. (source)
As a test of this I set up the following fiddle, which will output -webkit-min-device-pixel-ratio (with credit to this). Also stack snippet below.
https://jsfiddle.net/3w5rq8pj/10/
I tested this on several devices with the following results:
Actual iPhone 7 Plus / Result 3
Macbook Pro with Retina Display / Result 3
Lenovo Thinkpad (ie) / Result 0
Emulated iPhone 6 Plus on BrowserStack via Macbook Pro with Retina / Result 3
Emulated iPhone 6 Plus on BrowserStack via Lenovo Thinkpad / Result 3
In all these cases the Browserstack emulators returned the proper results (which honestly suprised me).
I also re-ran all the tests but removed -min from the query in the javascript, and every single test case returned 0.
function guess() {
var ls, l=0, h=8192, c=parseInt((l+h)/2), i=20;
while (i > 0 && (c - l >1) && (h - c>1)) {
i--; // Shouldn't take more than 13 guesses, but in case of bugs!
if (window.matchMedia('(-webkit-min-device-pixel-ratio: ' + c + ')').matches) {
l=c; ls=0;
} else {
h=c; ls=1;
}
c = parseInt((h+l)/2);
}
c -= ls;
document.getElementById("result").innerHTML = "min pixel ratio: " + c;
}
guess();
<div id="result"></div>
Related
I want to capture screen in my second monitor, Currently i am using CmdCapture.exe application to take screenshot in certain time interval but it is only capturing the screen from primary monitor so i have no knowledge how to capture screen from secondary monitor using CmdCapture.exe.
I am using the following codes to take screenshot:
var cmdScreenCaputeLocation:File = File.applicationDirectory.resolvePath("assets\\CmdCapture.exe");
var nativeProcessStartInfo:NativeProcessStartupInfo = new NativeProcessStartupInfo();
nativeProcessStartInfo.executable = cmdScreenCaputeLocation;
var args: Vector.<String> = new Vector.<String>();
var uid:String = "tempImg"+imgCounter+"";
args.push("/f", (uid+".jpg"),"/d",""+screencaptureDir+"", "/q 70");
nativeProcessStartInfo.arguments = args;
var nativeProcess:NativeProcess = new NativeProcess();
nativeProcess.addEventListener(NativeProcessExitEvent.EXIT,screenCaptureNativeProcessComplated);
nativeProcess.addEventListener(ProgressEvent.STANDARD_ERROR_DATA,screenCapturOonErrorS);
nativeProcess.addEventListener(IOErrorEvent.STANDARD_INPUT_IO_ERROR,screenCaptureOnError);
nativeProcess.start(nativeProcessStartInfo);
imgCounter++;
So anybody have an idea how to take screenshot from secondary monitor using CmdCapture.exe or using any other applications which can be run in actionscript nativeprocess command, please help me.
Regarding BoxCutter docs...
Usage : boxcutter [OPTIONS] [OUTPUT_FILENAME]
OPTIONS
-c, = coords X1,Y1,X2,Y2 capture the rectangle (X1,Y1)-(X2,Y2).
-f, = fullscreen capture the full screen.
-h, = help display help message.
usage : boxcutter -c -AA,BB,CC,DD testgrab.png
Where numbers for :
AA is starting origin along X-axis (left/right)
BB is starting origin along Y-axis (up/down)
CC is grab width along X-axis (left/right)
DD is grab height along Y-axis (up/down)
As an example let's test : Screen 1 is w=1280 & h=800, Screen 2 is w=1024 & h=768.
grabbing examples :
for monitor 1 only use: boxcutter -c 0,0,1280,800 testgrab.png
for monitor 2 only use: boxcutter -c 1280,0,2304,768 testgrab.png
for both monitors 1 & 2 together use: boxcutter -c 0,0,2304,800 testgrab.png
Note that Screen 2 begins after the width of Screen 1 ends. So to grab both screens at same time CC must be total of added widths of Screen 1 + Screen 2. For height DD must use biggest height (from one of those two screens) to avoid any unwanted cropping.
Try this in your code
args.push("-c");
args.push("0", "0", "myWidth", "myHeight");
args.push("testgrab.png");
where : myWidth & myHeight = required width & height of grab area. .
PS : Check this Article since it might help you with settings for multiple monitors...
I am trying to code my own responsive grid system using SASS. Using this simple Tutorial I was able to make a simple grid.
Currently, I am calculating the widths of all the columns according to their media query using this code:
#media #{$breakpoint-medium} {
.wrapper {
width: 95%;
max-width: $grid-max-width;
}
#for $i from 1 through $grid-columns {
.col-#{$i} {
width: 100% / $grid-columns * $i;
}
}
}
Where $grid-columns = 12
This works well, however, I'd like to center a block of text that I have designated as 8-columns wide, so I need to push, or offset this column by 2 columns.
I'm new to SASS so I'm still getting my bearings with using math in my CSS and such, but how can I adapt this code so that I can make a similar class, "push-#" that will automatically know to push the content properly?
Thanks so much in advance!
It is essentially the same math, you are just applying margin instead of width.
#for $i from 1 through $grid-columns {
.push-#{$i} {
margin-left: 100% / $grid-columns * $i;
}
}
Here is my storyboard
I'm using autolayout, and NOT using size classes.
When I ran it on iPhone 5s, it works fine.(both portrait and landscape)
But when I ran it on iPhone 6 plus (portrait), it's not aligning properly.
on iPhone 6 plus (landscape), it's worse.
I know I can use -widgetMarginInsetsForProposedMarginInsets: to set the margin, but in that case I will need to customize the margin for every device. That would be horrible :(
So is there a way to align the subview to the title less painfully?
Setting the edge insets to zero should fix the problem:
- (UIEdgeInsets)widgetMarginInsetsForProposedMarginInsets:(UIEdgeInsets)defaultMarginInsets
{
return UIEdgeInsetsZero;
}
Looks like you have to set it manually. You can do this by creating a constraint, then specifying an IBOutlet to it, and setting the constant depending on the device/orientation.
For reference, here are the margins I found you needed:
5S - 1 (2px)
6 - 1 (2px)
6 plus portrait - 5 (15px)
6 plus landscape - 34 (102px)
You can find which one you need from the size of the extension view, which is 414 pt for a portrait iPhone 6.
You need to customise the widget margins:
- (UIEdgeInsets)widgetMarginInsetsForProposedMarginInsets:(UIEdgeInsets)defaultMarginInsets;
Documentation: https://developer.apple.com/library/ios/documentation/NotificationCenter/Reference/NCWidgetProviding_Protocol/index.html
Fixes for some devices. Requires Ericas UIDevice-Extension.
- (UIEdgeInsets)widgetMarginInsetsForProposedMarginInsets:(UIEdgeInsets)defaultMarginInsets
{
defaultMarginInsets.bottom = 0;
if ([UIDevice.currentDevice.modelIdentifier containsString:#"iPhone7,1"] && self.traitCollection.horizontalSizeClass == UIUserInterfaceSizeClassCompact) {
defaultMarginInsets.left += 5;
} else if ([UIDevice.currentDevice.modelIdentifier containsString:#"iPhone7,1"] && self.traitCollection.horizontalSizeClass == UIUserInterfaceSizeClassRegular) {
defaultMarginInsets.left += 34;
} else {
defaultMarginInsets.left += 1;
}
return defaultMarginInsets;
}
I want to check current orientation of screen with if statement for example.
if(orientation==landscape)
{
a++;
}
What should i use for this kind of job how can i get my current orientation and check it with if statement.
ok i solved my problem
else if (p.X > 10 && p.X < 100 && a >= 1 && Orientation==PageOrientation.Landscape)
{
a--;
link = "cevsen/" + a.ToString() + ".jpg";
}
you can get your current orientation with Orientation and compare PageOrientation.Landscape
I'm using wkhtmltopdf to convert some HTML to PDF. Is there a proper way to handle sizes and dimensions?
I mean - how can I style an image with the dimension of 100px x 1oopx that it is printed in the following dimension 10mm x 10mm (I'm using DINA4: 210mm x 297mm)?
I believe you can use a variety of units in the print styles, including cm and mm. So something like this should work:
#media print {
img.selector { width:1cm; height:1cm; }
}
Or perhaps just:
#media print {
img[width="100"]{ width:1cm; height:1cm; }
}