Looking to have a spotify playlist a certain size when viewing on desktop, but smaller on mobile? The code is HTML
It is possible to create a responsive Spotify embedded iframe, but only to an extent. Spotify limits a user: https://developer.spotify.com/technologies/widgets/spotify-play-button/
There is a min and max width (height x width):
max: 720px x 640px
min: 80px x 250px
If you are using media queries, these dimensions should work on mobile and desktop.
Related
I'm using Agora sdk for video calling feature in my app. I've tried the advance iOS example, and currently able to see the video call between two users.
However my UI needs to show it in grid layout of same size items (maximum 8 video call views)... Like a vertical UICollectionView of equal sized cells. (screenshot below)
I've tried the Advanced video example from here - https://github.com/AgoraIO/Advanced-Video but couldn't figure out how to make the grids.
Kindly guide me how to do this. Thanks.
I have a small demo that creates NxN grids of all the video feeds in a chat in this example.
https://github.com/maxxfrazer/Agora-iOS-Swift-Example/blob/248a1d2291060891f2fda92a657c2067d841d964/Agora-iOS-Example/ChannelViewController%2BVideoControl.swift#L108
it just leaves black holes where the other ones should be if there's not a square number of people in the chat, but hopefully it is enough to get you started with repositioning views based on the number of connected users.
I have a minimal app with basic views, texts, images and buttons in react native. The problem I am facing, is in managing layout for multiple devices.
Any suggestions on how can I maintain a same (proportionate) view & font size for multiple devices (multiple screen resolutions and screen sizes).
View:
For example, if I want a list view of items, where each row has one image on the left, some text in between and 2 buttons on the right (one below the other i.e. flex-direction: 'column'), how can I have this look good on a 5" device as well as a 10" device?
Also, consider the buttons have some borderRadius, if we are scaling the buttons, the borderRadius value will also need to be increased. How do I achieve this?
Fonts:
I have tried using PixelRatio.getFontScale() but this scales the font depending on only the resolution (from what I understood). Using this, makes a font of size 12 look bigger on a 5" device with higher resolution and smaller on a 10" device with lower resolution. So how can I manage font sizes for the react native app?
In addition to the PixelRatio.getFontScale() you can also use the Dimensions API to get the height and width of the window, and scale your components relative to that. I have built an app that runs on both iOS and android and use this to scale width's + heights.
Checkout the link Dimensions # Facebook - React Native
ie.
Dimensions.get('window').width;
Dimensions.get('window').height;
Will return you the size of the window
How about this library? react-native-scaled-layout
You can use scaled dimensions for your layout margin, height, padding ...
(36).scaled() /* or */ (36).d()
(36).widthScaled() /* or */ (36).w()
(36).heightScaled() /* or */ (36).h()
(24).fontScaled() /* or */ (24).f()
style={{
width: (100).w(),
height: (210).h() + safeAreaBottom,
borderRadius: (16).d(),
justifyContent: 'center',
paddingBottom: safeAreaBottom + (24).h(),
}}
I know this is ridiculous, but I'm learning...
In a Chrome application I let my sender initiate and load a Custom receiver.
The receiver page includes a video element set to play one specific video, like this:
<video autoplay>
<source src="../media/someVideo.mp4" type="video/mp4">
</video>
The receiver page and the media file are hosted on a web server (SP)
I use no further communication between sender and receiver, so the receiver just loads and plays the video.
It works beautifully, but the video size on the device (TV) is too big. It fills the screen, but I don't see the full picture.
I try to downsize the video using CSS or by setting the width and height parameters on the video element, but the result is the same. Why doesn't ChromeCast respect these settings?
width/height for the video element should work. As a test, just set width and height in the element itself and test. On a tv screen, in general, there is a notion of overscan and most modern tv sets have a setting to adjust that, you might want to check to see if your tv offers that too or not.
I want to build a website that looks exactly the same across all screen width's, which means the whole website will scale according to the screen's, or more accurately, the viewport's width.
This is relatively easy to do for SVG images and I have all images correctly scaling according to the viewport's width. The viewport's width is the point of reference, from which all images scale. However, the point of reference for the text is different between any desktop browser and the iPhone's Safari (and I assume any mobile browser).
According to my research there seem to be two possible reasons for different sized text: a difference in the default CSS's or a difference in the rendering engines. Since I can't find any reference to pixel sized text on Chrome's default CSS or Firefox's default CSS, I assume this setting comes from the rendering engine.
My IP is dynamic so I can't provide a live example, but here are the screens comparing the same site in iPhone's Safari and Chrome on the desktop. Notice the huge difference in the size of the text.
Is there any way I can make the text have the same relative size in both these browsers?
I found the answer in JavaScript:
onresize=onload=function(){
document.body.style.fontSize=window.innerWidth/20+"px"
}
which sets the text size according to the viewport's width on the body element. Since all the text set in em's is sized in relation to their parents, all the text is sized correctly from the body element.
Furthermore, if you want to avoid the cascading hell by using rems and respect the original layout design from a let's say 1024px width you can stick with this:
onresize = onload = function(){
document.querySelector("html").style.fontSize = ( innerWidth * 100 ) / 1024 + "%";
}
You should try CSS Unit vw, like this:
body { font-size: 1.5vw; }
However, i am not sure it is supported by mobile browsers...
EDIT
Check for browser compatibility here.
I have an Android mobile app created with jQuery Mobile and PhoneGap. I would like to have 3 separate layouts depending on device and orientation:
Portrait phone - on smartphones I want to use always portrait layout
Portrait tablet - different than on phone
Landscape tablet
Is this possible to achieve with CSS media queries? I know changing layouts is possible, but not sure how to force portrait layout only for smartphones and at the same time allow landscape for tablets.
Most of the devices would come under the following 3 resolutions
1) HVGA-Half of VGA (320 x 240) 2) WVGA- wide VGA(800x 480) - nearly 1.5 times of HVGA 3) HVGA 2x- (640 X 960) - IPHONE 4 uses this resolution
for your requirements
1) & 2) you can write your styles inside #media as below. you can use HVGA or WVGA. Change width and height as per your need
#Media screen and (min-width: 320px) and (max-width: 480px){
/* css files here*/
}
3)For a landscape view use orientation:landscape like in below example
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape){
/* css files here */
}
The code piece is just for your reference . Your needs may be different, Please change parameters like screen/only ,min-device-pixel-ratio, max-device-pixel-ratio etc as per your needs