Question about widget landscape and portrait - mobile

I need to use my menu with image in landscape and portrat (if user turns the phone to another position) using widget.
I need for landscape and portrait with different widget design, or exists other better solution (like works responsive html)?

You can design your widgets for multiple resolutions using the canvas scaling (see here) or by creating dedicated widgets for landscape and portrait. To determine which to show, simply compare the Screen width and height (see here). If width > height, show the landscape and portrait elsewise.

Related

Locking rotation around Z axis in mobile orientation panorama view with threeJS

I need your help with ThreeJS, panorama view and Quaternions.
For mobile device orientation panorama view, in a page like this one:
https://richtr.github.io/Full-Tilt/examples/vr_test.html
how would you go about locking the view when rotating around the Z axis (between the use and the middle of the screen), like the way this video does:
https://www.youtube.com/watch?list=PLbsGxdAPhjv_tgCNWGaGvSnlIMZNkmnrM&t=10&v=ClAuhgFQpLo
Please watch on mobile.
Thanks!
Sa'ar

Colorbox fluid layout only on mobile

I need to have colorbox window with static width (it is actualy dynamic - depends on css specified width or image actual width etc...) except mobile version. I'm doing responsive website. When I resize browser window it always have fixed width, but when I'm on mobile the colorbox window is wider than broser window - it doesn't resize to fit the browser window screen. I apply this:
$(window).on('resize', function(){
$.colorbox.resize({width: '100%'});
});
This help, but if I return to non mobile device or when I resize browser window it stays at 100%. But at this point I want to return colorbox window to have static width as previous. Keep in mind that previous width is based on content width (image width) or css specified width.
Any idea how to do this?
Thanks
Why do you only want the colorbox to be 100% width when user resize the window? Notice what you did in your JS is not detecting whether user is on a mobile device.
It seems like you should use media queries instead. Read more here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

How to easily change the layout of the screen from Portrait to Landscape and vice versa in WPF

Let's suppose we have the designed the layout of some WPF application to be used on standard Full HD screen 1920x1080. Then we need to rotate the screen and install it in a box that is mounted on kiosk PC but in Portrait orientation.
I need to find a way on how to rotate the screen easily or at least in some more elegant way.
I tried to use use RenderTransform and RotateTransform applied to the contents of the window but this rotates the image and of course not the layout.
The controls remain of the same width and height.
Is there a way to do it automatically or should I take each control and change it properties one by one ?
The problem is present for TextBlocks and TextBoxes. They are intended to be used horizontally. You can rotate it but the layout is calculated based to it's horizontal width.
BTW. Rotation of the entire window is not allowed. It throws an exception.
It looks like that I have found the solution myself. If we choose the Layout transform instead of RenderTransform then the visual system does the arrangement and measurement of the layout automatically before the rendering.
The WPF framework does the job in this order
LayoutTransform
Measure
Arrange
RenderTransform
Render
This is best described here LAYOUTTRANSFORM VS. RENDERTRANSFORM - WHAT'S THE DIFFERENCE?

Maintain Aspect Ratio in a Silverlight Image

Ok .. so here's the scenario. I've got a WP7 silverlight app, that loads an image from the net. Now, these images will be taken from mobile devices, so they may be in portrait or landscape mode. Certainly not a square.
Is there any way to maintain the aspect ratio when I show these in a silverlight <Image> control?
I'm ok with either of two resolutions:
That the image shows up in its correct aspect ratio within a predefined box that I've defined in xaml
Or that the image is cropped into the square
The way silverlight was built, you can set the width OR the height on the image, it will automatically max out whatever property you set and calculates the other side of the image so that it keeps the aspect-ratio.
So, just set a width on the image and center or right,left,top,bottom align it. (do not stretch it).

WP7 WebBrowser control enlarges text when in Landscape mode

I have a WebBrowser control that is getting content via the NavigateToString() method. It looks fine in portrait mode, but when I change the orientation to landscape, the text becomes noticeably larger (I'd say about 2 times larger). I'm not sure what's going on. I'm not doing anything to the WebBrowser control on orientation changed. If I change the orientation back to portrait, it looks correct again. Does anyone know what could be going on here?
I'm guessing that you're using a fixed width for the viewport and this is causing the text to be enlarged as all the content is stretched to the wider screen size when in landscape mode.
If you can post an example of the HTML you're using we could probably say for sure.

Resources